vue3的计算属性和监视

const user =ref({
        firstName:'宇智波',
        lastName:'鼬'
      })
      //计算属性
      //第一种只传入一个回调函数
      const computed1= computed(()=>{
        return user.value.firstName+'_'+user.value.lastName
      })
      console.log(computed1.value,'我是计算属性的第一种用法')
      //第二种，传入get和set方法
      const computed2 = computed({
        get(){
          return user.value.firstName+'_'+user.value.lastName
        },
        set(val){
          console.log(val,'我是set，我被触发了')
        }
      })
      console.log(computed2.value,'我是计算属性的第二种用法')
      computed2.value='asd'
      console.log(computed2)

      //监视
      watch(user,(newVal,oldVal)=>{
        console.log(newVal,oldVal,'我是watch')
      },{immediate:true,deep:true})
      //监视多个属性
      watch([age,user],(n,o)=>{
        console.log(n,o,'watch监视多个属性')
      },{immediate:true})
      //监视对象的属性
      watch([()=>user.value.firstName,()=>user.value.lastName],(n,o)=>{
        console.log(n,o,'watch监视对象的属性')
      },{immediate:true})
      //另外一种监视
      watchEffect(()=>{
        age.value+=user.value.firstName
      })
      setTimeout(()=>{
        user.value.firstName='宇智波佐佐木'
      },3000)

计算属性的使用上来说问题和vue2区别不大，这里要注意computed函数的返回值是一个ref对象，所以在使用的时候需要.value

监视分为两种，watch和watchEffect
第一种和vue2区别也不大，需要注意的点是，这个watch是惰性的，初始化不会自动触发，如果需要初始化的时候就去触发需要传入第三个配置对象，里面有一个immediate属性，配置为true即可。
当我们监听reactive的响应式数据的时候需要通过函数返回值的方式
也就是这样

 watch([()=>user.value.firstName,()=>user.value.lastName],(n,o)=>{
        console.log(n,o,'watch监视对象的属性')
      },{immediate:true})

监听多个属性watch的第一个参数就用数组包裹，返回的新旧数据也是一个数组，按照你传入的那个数据的顺序排列。
监听深层次嵌套数据的时候依然要开启deep深度监视。

watchEffect不是惰性的，他会在初始化的时候就被调用。并且他的内部不需要指定需要监视的属性，回调函数中用到了谁就监听谁，有点类似计算属性。