Vue3中的计算属性与监视-526互联

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配置有效