Computed, watch, watchEffect functions in _vue3

computed attribute

Consistent with the computed configuration function in vue2

The complete writing method needs to carry get and set, read get and modify set, and you can get the new value through the parameters in set

Introduce computed when using

import { computed } from '@vue/runtime-core'

   //简便写法

    let Name = computed(() => {
      return data.firstName + '-' + data.lastName
    })

//完整写法
 setup () {
    let data = reactive({
      firstName: '张',
      lastName: '三',
    })

    let fullName = computed({
      get () {
        return data.firstName + '-' + data.lastName
      },
      set (val) {
        const arr = val.split('-')
        data.firstName = arr[0]
        data.lastName = arr[1]
      }
    })
    return {
      data,
      fullName
    }
  }

Watch property

Watch is a function in vue3, you can call it multiple times, or you can continue to write watch according to the way vue2 is written, but it is not recommended to write like this

watch has three parameters

Parameter one: the monitored data

Parameter 2: Monitoring callback, old and new values

Parameter three: monitoring configuration items, such as immediate, deep, etc.

Then we need to monitor according to the actual situation

1. If the monitored data is the response data defined by ref, the syntax is

let sum = ref(0)
watch(sum,(newval,oldval)=>{
     console.log('sum',newval, oldval);
},{immediate:true})

2. If we listen to data defined by multiple refs, we need to put the monitored values in an array, and newval and oldval are also an array

let sum = ref(0)
let msg = ref('你好')
watch([sum,msg],(newval,oldval)=>{
     console.log('sum和msg',newval, oldval);
},{immediate:true})

3. If the monitored data is all the attributes defined by reactive

1. At this time, we can't get oldval normally. Generally speaking, as long as we monitor an object, we can't get normal oldval

2. By default, deep monitoring is forced to start, and cannot be canceled with deep: false

  let data = reactive({
      firstName: '张',
      lastName: '三',
    })

    watch(data, (newval, oldval) => {
      console.log('新值', newval);
      console.log('旧值', oldval);
    }, { deep: false, immediate: true })

4. If the data we monitor is an attribute in the data defined by reatvie,

Our first parameter needs to be written as an object and return this property

    let data = reactive({
      firstName: '张',
      lastName: '三',
      job: {
        salary: 30
      }
    })


    watch(() => data.firstName, (newval, oldval) => {
      console.log('新值', newval);
      console.log('旧值', oldval);
    }, { deep: false, immediate: true })

5. If we need to monitor the properties defined in multiple reatives, the first parameter is also an array, and each value is an object

      let data = reactive({
      firstName: '张',
      lastName: '三',
      person: {
        one: {
          job: {
            salary: 30
          }
        }
      }
    })
    
    watch([() => data.firstName, () => data.lastName], (newval, oldval) => {
      console.log('新值', newval);
      console.log('旧值', oldval);
    }, { deep: false, immediate: true })

6. If we are listening to a complex data type attribute in an object defined by reactive,

When modifying a certain attribute deeply nested in this complex data type,

We need to manually enable deep

   let data = reactive({
      firstName: '张',
      lastName: '三',
      person: {
        one: {
          job: {
            salary: 30
          }
        }
      }
    })    

 watch(() => data.person, (newval, oldval) => {
      console.log('新值', newval);
      console.log('旧值', oldval);
    }, { deep: true, immediate: true })

watchEffect function

This function is also a listener property

But you don't need to specify which property to monitor, which property is used in the callback of the monitor, which property will be automatically monitored

watchEffect and computed feel similar, because the dependent data has changed and re-executed

watchEffect focuses on the process, so there is no need to return a value

Computed pays more attention to the result, and the return value must be returned, because when we use computed, we need a result returned by him to use

watchEffect(()=>{

    const x1 = sum.value
    const x2 = person.age
    console.log('watch的配置回调执行了')

})