_vue3中computed、watch、watchEffect函数

computed属性

和vue2中的computed配置功能一致

完整写法要携带上get和set，读取走get，修改走set，可以通过set中的参数拿到新值

使用时引入computed

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属性

在vue3中watch是一个函数，你可以多次调用，或者你也可以按照vue2的写法继续写watch，但是不建议这么写

watch有三个参数

参数一：监听的数据

参数二：监视的回调，新旧值

参数三：监视配置项、比如immediate、deep等等

然后我们需要根据实际情况去进行监听

一、如果监听的数据为ref定义的响应式数据，语法为

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

二、如果监听多个ref定义的数据时，我们需要把监听的值放在数组里，newval和oldval也是一个数组

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

三、如果监听的的数据为reactive定义的全部属性

1.此时我们不能正常的获取到oldval，一般来说只要监听的是一个对象就拿不到正常的oldval

2.默认强制开始深度监听，并且不能用deep：false去取消掉

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

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

四、如果我们监听的数据为reatvie定义的数据中的某一个属性时，

我们第一个参数，需要写成一个对象，并返回这个属性

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


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

五、如果我们需要监听多个reative中定义的属性的话，同样第一个参数为一个数组，每一个值为一个对象

      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 })

六、如果我们监听的是reactive所定义的对象中的某一复杂数据类型属性，

修改的时候这个复杂数据类型中深层嵌套的某一个属性，

我们需要手动开启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函数

这个函数也是监听属性

但是你不需要指定监听的哪个属性，监听的回调中用到了哪个属性，就会自动监视哪个属性

watchEffect和computed感觉差不多，都是依赖的数据发生变化了重新执行

watchEffect注重过程，所以不需要返回值

computed更注重的是结果，必须要return返回值，因为我们用computed就是需要他返回的一个结果去使用

watchEffect(()=>{

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

})