vue3.o计算属性及watch监听方法的使用；wacthEffect的理解及使用方法；

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下所定义的响应式数据中的某’个‘属性需要如下写
      // watch(()=>person.work.f1.salary,(newV,oldV)=>{
      //   console.log(newV,oldV)
      // },{immediate:true，deep:true})

      // 情况五:监视reactive下所定义的响应式数据中的某’些‘属性需要如下写
      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  指定下，然后deep开启也有效；
      
      return {sum,age,person}
    }

**

3.wacthEffect 的使用

**
备注：wacthEffect：不用知名监听属性，用到哪个属性，哪个属性就会被监听（直接有个回调即可）；
watch：需要知名监听属性的名称实现监听效果，

<template>
    当前求和：{{sum}}<br />
    <button @click="sum += 1"> + 1</button>
    <button @click="addSum.name += '~'"> + ~</button>
</template>

<script>
import { ref, watchEffect, reactive } from "vue";
export default {
    name: "App",
    setup() {
        let sum = ref(0);
        let addSum = reactive({
            name: "loki",
        });
        watchEffect(() => {
            console.log(sum.value);
            console.log(addSum.name);
        });
        return { sum, addSum };
    },
};
</script>