Vue3 （computed函数，watch函数，watchEffect函数）

1.computed函数

与vue2中computed配置功能一致

变化：需要引入（组合式的API）

2.watch函数

变化：需要引入（组合式的API）

情况一：监视ref所定义的一个响应式数据

 watch(sum,(newValue,oldValue)=>{
      console.log(newValue,oldValue);
      //立即监听
    },{immediate:true})

情况二：监视ref所定义的一多响应式数据

 watch([sum,msg],(newValue,oldValue)=>{
      console.log('sum或msg变了',newValue,oldValue);

    })

 情况三：监视reactive所定义的一个响应式数据

• 此处无法正确的获取oldValue
• 强制开启了深度监视(deep配置无效)

 watch(person,(newValue,oldValue)=>{
      console.log('person变化了',newValue,oldValue);

    })

情况四：监视reactive所定义的个响应式数据中的某个属性

 watch(()=> person.name）,(newValue,oldValue)=>{
      console.log('name变化了',newValue,oldValue);

    })

情况五：监视reactive所定义的个响应式数据中的某些属性

watch([()=>person.name,()=>person.age],(newValue,oldValue)=>{
      console.log('name和age变化了',newValue,oldValue);

    })

特殊情况：

watch(()=>person.job,(newValue,oldValue)=>{
    console.log('person的job变化了',newValue,oldValue)
 },{deep:true})

  此处由于监视的是reactive定义的对象中的某个属性，所以deep配置有效

3.watchEffect函数

变化：需要引入（组合式的API

watch的套路是：既要指明监视的属性，也要指明监视的回调

watchEffect的套路是：不用指明监视哪个属性，监视的回调中用到哪个属性，就监视哪个属性

watchEffect有点像computed：

• 但computed注重的计算出来的值（回调函数的返回值），所以必须要写返回值。
• 而watchEffect更注重的是过程（回调函数的函数体），所以不用写返回值。

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