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;        });    }}