Vue3 computed && watch(watchEffect)

# Vue3 计算属性与监视
    # 1.computed函数：与Vue2.x中的computed配置功能一致
    inport {ref,computed,watch} from 'vue';
    setup(){
        let person = {
            firstName: '张',
            lastName: '三'
        };
        // 计算属性——简写
        let fullName = computed(()=>{
            return person.firstName + person.lastName;
        });    
        // 计算属性完整写法（这里你也可以直接：person.fullName = computed(...)）
        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与watchEffect
    <template>
      <h2>sum的值：{{sum}}</h2>
      <button @click="sum+=1">点我＋1</button>
      <hr>
      <h3>{{msg}}</h3>
      <button @click="msg+='!'">点我＋！</button>
      <hr>
      <h3>姓名：{{person.name}}</h3>
      <h3>年龄{{person.age}}</h3>
      <h3>薪资：{{person.job.j1.salary}}K</h3>
      <button @click="person.name+='~'">修改姓名</button>
      <button @click="person.age++">年龄增长</button>
      <button @click="person.job.j1.salary++">涨薪</button>
    </template>

    <script>
    import {ref, reactive, computed, watch, watchEffect} from 'vue'
    export default {
      name: 'HelloWorld',
      setup(props, context){
        let sum = ref(0);
        let msg = ref('你好啊');
        let person = reactive({
          name: '张三',
          age: 18,
          job:{
        j1:{
          salary: 30
        }
          }
        });

        // 情况一：监视ref所定义的一个响应式数据
        watch(sum, (newValue, oldValue)=>{
          console.log('sum的值变化了！',newValue, oldValue);
        },{immediate:true});

        // 情况二：监视ref所定义的多个响应式数据
        watch([sum,msg], (newValue, oldValue)=>{
          console.log('sum或msg的值变化了！',newValue, oldValue);
        },{immediate:true});

        /*
          情况三：监视reactive所定义的一个响应式数据的全部属性
        1.注意：吃出无法正确的获取oldValue
        2.注意：强制开启了深度监视(deep=false配置无效)
        */
        watch(person, (newValue, oldValue)=>{
          console.log('person的值变化了！',newValue, oldValue);
        },{deep:true});  // 此处deep配置无效

        // 情况四：监视reactive所定义的一个响应式数据中的某个属性
        watch(()=>person.name, (newValue, oldValue)=>{
          console.log('person.name的值变化了！',newValue, oldValue);
        });

        // 情况五：监视reactive所定义的多个响应式数据中的某个属性。newValue和oldValue会以数组形式呈现新旧值
        watch([()=>person.name, ()=>person.age], (newValue, oldValue)=>{
          console.log('person.name或person.age的值变化了！',newValue, oldValue);
        });

        // 特殊情况:监视reactive所定义的对象数据，需要开启deep监视，不然对象属性不会被监视（注意：odlValue也不正常）
        watch(()=>person.job, (newValue, oldValue)=>{
          console.log('person.job的值变化了！',newValue, oldValue);
        }, {deep:true});

        /**
         * watchEffect函数：
         *  watch的套路是：既要知名监视的属性，也要知名监视的回调。
         *  watchEffect的套路是：不用知名监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。
         *  watchEffect有点想computed：
         *    .但computed注重是计算出来的值（回调函数的返回值），所以必须要写返回值
         *    .而watchEffect更注重的是过称（回调函数的函数体），所以不用写返回值
         */
        // watchEffect所指定的回调中用到的数据只要发生变化，则直接重新执行回调
        watchEffect(()=>{
          const x1 = sum.value;
          console.log('watchEffect被调用了0');
        });

        watchEffect(()=>{
          const x2 = person.job.j1.salary;
          console.log('watchEffect被调用了1');
        });

        return {
          sum,
          msg,
          person
        }
      }
    }
    </script>