Use the computed property function in the setup function

There are two ways to obtain new data after certain calculation based on existing responsive data:

A:
import {computed} from 'vue'
export default {
  setup() {
    const filterList = computed(() = > {
      return.//return calculated value
    })
    return {
      filterList
    }
  }
Copy the code
Method 2:
import {computed} from 'vue'
export default {
  setup() {
    const filterList = computed({
      get(){/ / set the value
          returnCalculated value},set(val){Val is the current state of filterList}})return {
      filterList
    }
  }
Copy the code

Note: You want to introduce computed from the VUE instance

Use the Watch listener in the setup function

Callback logic based on changes in responsive data is exactly the same as watch in VUe2

Using the step

  1. Import the Watch function from the VUE framework
import { ref,watch } from 'vue'
Copy the code
  1. Enable listening for reactive data by executing the watch function in the setup function
export default {
  setup() {
    const age = ref(18)
    watch(() = > {
      // Return the responsive property you want to listen on (ref objects must add.value)
      return age.value
    }, () = > {
      // Callback function after data change
      console.log('Age has changed')})return {
      age
    }
  }
Copy the code
  1. The watch function takes three normal arguments :(the first argument is a function that returns the responsive data that you want to listen for, the second argument is a callback to execute after the responsive data change, and the third argument is an object that can be configured to enable immediate execution or deep listening.)
export default {
  setup() {
    const age = ref(18)
    watch(() = > {
      // Return the responsive properties you want to listen on (ref objects must add.value)
      return age.value
    }, () = > {
      // Callback function after data change
      console.log('Age has changed')
    },{
    immediate: true.// Execute a listener when the page enters
    deep:true // Enable deep listening
    })
    return {
      age
    }
  }
Copy the code

When using watch, be as specific as possible about which properties you want to listen for to avoid performance problems caused by using deep. For example, when listening for nested properties of multiple objects, return obj.obj.item specifies which properties to listen for