vue3 计算属性与监视

这是我参与11月更文挑战的第20天，活动详情查看：2021最后一次更文挑战

1.computed函数

与vue2.x中computed配置功能一致

写法：

 import {computed} from 'vue'
 setup(){
      ...//用reactive定义变量person
      //计算属性简写（只有读取的功能）
      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配置有效

let person = reactive({job:'前端工程师',age:18}),
let sum = ref(0)
let msg = ref('你好啊')

//情况一：监视ref定义的响应式数据 immediate：watch中的回调函数一进页面就调用
watch(sum,(newValu,oldValue)=>{
    console.log('sum变化了',newValue,oldValue)
},{immediate:true}) //sum变化了 [0,'你好啊']  []

//情况二：监视多个ref定义的响应式数据 sum和msg为ref定义的两个简单类型的变量
watch([sum,msg],(newValue,oldValue)=>{ 
    console.log('sum或msg变化了',newValue,oldValue)//sum或msg变化了 [1, '你好啊']  [0, '你好啊']
})

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

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

情况三： 若watch监视的是reactive定义的响应式数据，则无法正确获得oldValue 可以看到，当点击按钮时，watch监听到的oldValue和改变后的newValue是一样的

解决方法： let person = ref({job:'前端工程师',age:18}), watch(person.value,(newValue,oldValue)=>{ console.log('person变化了',newValue,oldValue) })