乐趣区

关于vue.js:vueangular中的数据监听

jiezi

1、vue 中数据监听的办法。

当 data 中某个属性的值发生变化须要执行一些其它操作时，能够应用 watch 去监听这个属性，当属性值发生变化时，执行回调函数，解决相应的操作。

当监听的属性不是 object 对象时。

data: function() {
    return {num: 0,};
}
watch: {num: function(newV, oldV) {console.log('num 由'+oldV+'变成了'+newV);
    },
}

当监听的是一个 object 对象时，object 中属性值发生变化时不会触发回调函数，因为 object 指向的地址没有发生变化，所以监听对象发生变化时有以下三种办法。

监听的 user 对象。

data: function() {
    return {
        user: {
            name: 'zhang san',
            age: 23,
        },
    };
}

办法 1：当给 user 对象从新赋值时，能够间接监听 user 对象。

watch: {user: function(newV, oldV) {console.log('user 由'+oldV+'变成了'+newV);
    },
}

办法 2：应用 deep 参数。

应用 deep 须要应用 watch 的残缺模式：handler 是监听回调函数，deep: true 指定了不仅仅监听 user 的变动，也监听其外部属性的变动，所以当 user.name 或 user.age 变动时都能触发 handler 回调。

watch: {
  counter: {
      // user 或者 user 的属性发生变化时，都会触发 handler 函数。handler: function(newV) {console.log(newV);
      },
      deep: true,
  }
}

比拟办法 1 和办法 2 的优缺点

应用 deep 参数会为数据每一层都增加监听，当层级较深时比拟消耗性能。所以一般来说应用从新赋值的形式是较优的计划，但如果只是想监听外部嵌套的某个属性的数据的话，从新赋值就比拟重了，上面介绍监听对象中某个属性的办法。
办法 3：监听 object 对象中的某个属性。

watch: {user.name: function(newV, oldV) {console.log('name 属性由'+oldV+'变成了'+newV);
  },
  user.age: function(newV, oldV) {console.log('age 属性由'+oldV+'变成了'+newV);
  }
}

2、angular 中数据监听的办法。

办法一:  angular 中监听数据变动能够应用钩子函数 ngDoCheck 来监听。

export class TestComponent implements DoCheck {
    public name = 'zhangsan';
    public oldName: string;
    constructor() {this.oldName = this.name;}
    ngDoCheck() {if (this.name !== this.oldName) {console.log('name 产生了变动！');
        }
    }
}

此钩子函数在产生脏值检测时就会被调用，触发脏值检测的条件有 Dom 事件、异步申请、Location 变更事件等等，因而会有大量状况触发此钩子函数，很少的调用是因为数据批改而触发，因而可能产生性能问题。

办法二：angular 弃用了 angular1 中的数据监听 $watch 办法，但官网引入了 rxJS 来解决相似数据监听的需要。

场景：在 commonService 中定义初始化语言 ’en’，当切换语言时，在组件中监听并执行对应操作。

在 commonService 中 

import {BehaviorSubject} from 'rxjs';
export class CommonService {
    // 定义 language，设置初始语言 'en'。public language = new BehaviorSubject<string>('en');
    constructor() {}
    changeLanguage(lang) {
        // 点击切换语言时，调用 language 对象的 next 办法。this.language.next(lang);
    }
}

在其它组件中监听 language 的变动，来执行相应操作。

在 TestComponent 中 

export class TestComponent {
    public lang: string;
    constructor(public commonService: CommonService) {// 调用 next() 办法后，此处订阅取得变动后的值。this.commonService.language.subscribe((lang) => {this.lang = lang;});
    }
}
退出移动版