Vue3中的计算属性与监视

1、computed 函数

•    与 Vue2.x 中 computed 配置功能一致
• 写法：

import { computed } from 'vue

setup() {
   // 计算属性简写
   let fullName = computed(() => {
      return person.firstName + '-' + person.lastName
   })
 
   // 计算属性 - 完整
   let fullName = computed({
      get() {
         return person.firstName + '-' + person.lastName
      },
     set(value) {
       const nameArr = value.split('-')
       person.firstName = nameArr[0]
       person.lastName = nameArr[1]
    }
   })
}

2、watch 函数

• 与 Vue2.x 中的 watch 配置功能一致
• 两个小 '坑'：

            监视 reactive 定义的响应式数据时：oldValue 无法正确获取，强制开启了深度监视（deep配置失效）。

            监视 reactive 定义的响应式数据中某个属性时：deep 配置有效。

// 情况一：监视 ref 定义的响应式数据
watch(sum, (newValue, oldValue) => {
   console.log('sum变化了', newValue, oldValue)
}, {immediate:true})

// 情况二：监视多个ref 定义的响应式数据
watch([sum, msg], (newValue, oldValue) => {
   console.log('sum或msg变化了', newValue, oldValue)
})

/* 情况三： 监视 reactive 定义的响应式数据
    若 watch 监视的是 reactive 定义的响应式数据，则无法正确获得 oldValue，并且强制开启了深度监视 */
watch(person, (newValue, oldValue) => {
  console.log('person变化了', newValue, oldValue)
}, {immediate:true, deep:false}) // 此处的deep配置不再生效

// 情况四：监视 reactive 所定义的一个响应式数据中的某个属性
watch(() => person.name, (newValue, oldValue) => {
  console.log('person的name 变化了', newValue, oldValue)
})

// 情况五：监视reactive所定义的一个响应式数据中的某些属性
watch([() => person.name, ()=>person.age], (newValue, oldValue) => {
   console.log('person的name或age变化了', newValue, oldValue)
})

// 特殊情况
watch(() => person.job, (newValue, oldValue) => {
   console.log('person的job变化了',newValue, oldValue)
}, {deep:true}) // 由于监视的是reactive所定义的对象中的某个属性，所以deep配置有效

 3、watchEffect 函数

• watch 的套路是：既要指明监视的属性，也要指明监视的回调。
• watchEffect 的套路是：不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。
• watchEffect有点像computed：
  • 但computed 注重的是计算出来的值（回调函数的返回值），所以必须要写返回值
  • 而 watchEffect 更注重的是过程（回调函数的函数体），所以不用写返回值

//watchEffect 所指定的回调中用到的数据只要发生变化，则直接重新执行回调。
watchEffect(() => {
    const x1 = sum.value
    const x2 = person.age
    console.log('watchEffect 配置的回调执行了')
})