vue3 计算属性及watch监听方法的使用

1.计算属性

注意：fulllName它也有必要泄漏到setup的return中；

    setup() {
        let person = reactive({
          firstName:loki,
          lastName:Montaki
        })
        //  简写法
        // let fullName = computed(()=>{
        //   return ${person.firstName}·${person.lastName}
        // })
        // 全写法
        let fullName = computed({
          set(value){
            person.firstName = value.split(·)[0]
            person.lastName = value.split(·)[1]
          },
          get(){
            return ${person.firstName}·${person.lastName}
          }
        })
        return { person,fullName }
    }

**

2.watch

**

      setup() {
      let sum = ref(0)
      let age = ref(18)
      let person  = reactive({
          name:loki,
          age:18,
          work:{f1:{salary:20}}
      })

      // 情况一:监视ref定义的响应数据(略)
      // watch(sum,(newV,oldV)=>{
      //   console.log(newV,oldV)
      // },{immediate:true})

      // 情况二:监视ref定义的多响应数据(速记)可以用两个单独的watch它也可以写成数组，如下所示
      // watch([sum,age],(newV,oldV)=>{
      //   console.log(typeof newV,newV)
      // },{immediate:true})

      // 情况6:监视ref此时，下面定义的响应数据中的对象。deep使用方便；
      watch(persons,(newV, oldV) => {
          console.log(newV,oldV)
        },{ immediate: true,deep:true}
        );

      /*
        情况三:监视reactive定义的多响应数据的所有属性。
        1.注：目前尚不能正确获取。oldV的值可以稍后更新，ref这个问题不会出现，只是reactive定义的数据存在这样的问题；
        2.注意：到目前为止，深度监听已经默认开启。deep配置无效，即无论设置多少个对象，默认都可以监控对象中的对象，当发现最里面的对象发生变化时会触发。watch
      */
      // watch(person,(newV,oldV)=>{
      //   console.log(typeof newV,newV)
      // },{
      //   immediate:true,
      //   deep:false,// deep配置无效
      // })

      // 情况四:监视reactive下面定义的响应数据中的“one”属性需要写成如下
      // watch(()=>person.work.f1.salary,(newV,oldV)=>{
      //   console.log(newV,oldV)
      // },{immediate:true，deep:true})

      // 情况五:监视reactive下面定义的响应数据中的一些‘Some’属性需要写成如下
      watch([()=>person.work.f1.salary],(newV,oldV)=>{
        console.log(newV,oldV)
      },{immediate:true,deep:true})

      // 注：我理解并总结如下：deep它什么时候可以使用，
      // 1.使用ref定义的object对象，需要监听deep
      // 1.使用reactive定义的object一个对象(外层是对象，内层是对象)需要监听中间层。()=>person.work  指定Under，然后deep开放也是有效的；

      return {sum,age,person}
    }

**

3.wacthEffect 的使用

**
备注：wacthEffect：没有使用众所周知的监听属性，使用了哪个属性，会监听哪个属性(只有一个直接回调)；
watch：要达到收听效果，需要提供熟知收听属性的名称。