Vue3 computed && watch(watchEffect)

2022-07-13 15:04:56 阅读：165 来源： 互联网

标签：computed person watch watchEffect oldValue newValue

  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>

标签：computed,person,watch,watchEffect,oldValue,newValue
来源： https://www.cnblogs.com/watermeloncode/p/16473858.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue3 computed && watch(watchEffect)