Vue-watch 侦听对象属性

1. Vue watch 概述

Vue 的 watch 侦听器格式有两种：方法格式和对象格式的侦听器。

• 方法格式的侦听器只能监听简单数据范例，如：Number、String、… 无法监听对象属性的变化，也不能在进入页面时，主动触发；
  
• 对象格式的侦听器可以监听对象属性的变化。在肯定条件下，载入页面时，也可监听数据变化；
  

2. Vue 对象的监听方法

• 键名分割，监听对象的某一个属性变化；
  属性名通过 . 与对象分割，并通过引号包裹，可以监听对象的某一个属性
  

1. data() {
2.         return {
3.                 obj:{
4.                         name:'andy',
5.                         age:18
6. }}},
8. watch:{
9.         'obj.name'(newval.oldval) {
10.                 // 代码实现
11.         }
12. }

复制代码

• computed + watch，监听对象的某一个属性变化；
  

1. computed:{
2.      ageVal() {
3.            return this.obj.age;
4.      }
5. }
6. watch:{
7.      ageVal(newval,oldval) {
8.            // 代码实现
9.      }
10. }

复制代码

• deep 深度监听，监听对象的全部属性变化；
  
  
  • deep：true 开启深度监听，任意属性的属性值变化，都会触发 deep 深度监听；
    
  • deep 深度监听只能获取到最新值；
    
  • 不推荐 deep 深度监听，容易造成页面卡顿，因为deep 深度侦听须要遍历被侦听对象中的全部嵌套的属性；
    
  
  

1. obj:{
2.       handler(val) {
3.            // 代码实现   val 值是 obj 整个对象
4.       },
5.       deep:true // deep 为 true 时，开启深度监听
6.       // immediate:false 当immediate 值为 true 时，刚载入页面时，也可监听数据的变化
7. }

复制代码

来源：https://blog.csdn.net/qq_45050686/article/details/128108192
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！