Vue3 computed && watch(watchEffect)

  1 # Vue3 计算属性与监视
  2     # 1.computed函数：与Vue2.x中的computed配置功能一致
  3     inport {ref,computed,watch} from 'vue';
  4     setup(){
  5         let person = {
  6             firstName: '张',
  7             lastName: '三'
  8         };
  9         // 计算属性——简写
 10         let fullName = computed(()=>{
 11             return person.firstName + person.lastName;
 12         });
 13         // 计算属性完整写法（这里你也可以直接：person.fullName = computed(...)）
 14         let fullName = computed({
 15             get(){return person.firstName+person.lastName},
 16             set(value){
 17                 const nameArr = value.split('-');
 18                 person.firstName = nameArr[0];
 19                 person.lastName = nameArr[1];
 20             }
 21         });
 22     }
 23     # 2.watch与watchEffect
 24     <template>
 25       <h2>sum的值：{{sum}}</h2>
 26       <button @click="sum+=1">点我＋1</button>
 27       <hr>
 28       <h3>{{msg}}</h3>
 29       <button @click="msg+='!'">点我＋！</button>
 30       <hr>
 31       <h3>姓名：{{person.name}}</h3>
 32       <h3>年龄{{person.age}}</h3>
 33       <h3>薪资：{{person.job.j1.salary}}K</h3>
 34       <button @click="person.name+='~'">修改姓名</button>
 35       <button @click="person.age++">年龄增长</button>
 36       <button @click="person.job.j1.salary++">涨薪</button>
 37     </template>
 38
 39     <script>
 40     import {ref, reactive, computed, watch, watchEffect} from 'vue'
 41     export default {
 42       name: 'HelloWorld',
 43       setup(props, context){
 44         let sum = ref(0);
 45         let msg = ref('你好啊');
 46         let person = reactive({
 47           name: '张三',
 48           age: 18,
 49           job:{
 50         j1:{
 51           salary: 30
 52         }
 53           }
 54         });
 55
 56         // 情况一：监视ref所定义的一个响应式数据
 57         watch(sum, (newValue, oldValue)=>{
 58           console.log('sum的值变化了！',newValue, oldValue);
 59         },{immediate:true});
 60
 61         // 情况二：监视ref所定义的多个响应式数据
 62         watch([sum,msg], (newValue, oldValue)=>{
 63           console.log('sum或msg的值变化了！',newValue, oldValue);
 64         },{immediate:true});
 65
 66         /*
 67           情况三：监视reactive所定义的一个响应式数据的全部属性
 68         1.注意：吃出无法正确的获取oldValue
 69         2.注意：强制开启了深度监视(deep=false配置无效)
 70         */
 71         watch(person, (newValue, oldValue)=>{
 72           console.log('person的值变化了！',newValue, oldValue);
 73         },{deep:true});  // 此处deep配置无效
 74
 75         // 情况四：监视reactive所定义的一个响应式数据中的某个属性
 76         watch(()=>person.name, (newValue, oldValue)=>{
 77           console.log('person.name的值变化了！',newValue, oldValue);
 78         });
 79
 80         // 情况五：监视reactive所定义的多个响应式数据中的某个属性。newValue和oldValue会以数组形式呈现新旧值
 81         watch([()=>person.name, ()=>person.age], (newValue, oldValue)=>{
 82           console.log('person.name或person.age的值变化了！',newValue, oldValue);
 83         });
 84
 85         // 特殊情况:监视reactive所定义的对象数据，需要开启deep监视，不然对象属性不会被监视（注意：odlValue也不正常）
 86         watch(()=>person.job, (newValue, oldValue)=>{
 87           console.log('person.job的值变化了！',newValue, oldValue);
 88         }, {deep:true});
 89
 90         /**
 91          * watchEffect函数：
 92          *  watch的套路是：既要知名监视的属性，也要知名监视的回调。
 93          *  watchEffect的套路是：不用知名监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。
 94          *  watchEffect有点想computed：
 95          *    .但computed注重是计算出来的值（回调函数的返回值），所以必须要写返回值
 96          *    .而watchEffect更注重的是过称（回调函数的函数体），所以不用写返回值
 97          */
 98         // watchEffect所指定的回调中用到的数据只要发生变化，则直接重新执行回调
 99         watchEffect(()=>{
100           const x1 = sum.value;
101           console.log('watchEffect被调用了0');
102         });
103
104         watchEffect(()=>{
105           const x2 = person.job.j1.salary;
106           console.log('watchEffect被调用了1');
107         });
108
109         return {
110           sum,
111           msg,
112           person
113         }
114       }
115     }
116     </script>