Vue.js 监听属性watch

平时我们写业务代码的时候，假如需要对某个数据进行监听，检测其值的改变，然后做一些对应的业务处理的时候，我们就可以用到监听属性warch。当然这个监听属性和计算属性，有时候我们都可以来处理同一个问题。所以一般哪个方便就用哪个；

我们搞个小实例，来计算某个用户输入数据的平方；这里我们可以对结果变量搞成计算属性，也可以搞监听属性监听用户输入的数据，也就是监听数据变量的变化；

我们先用前面学的计算属性实现，对结果数据搞计算属性；

<div id="app">

    &nbsp;&nbsp;<input type="text" v-model="n" style="width:30px">&nbsp;&nbsp;的平方是&nbsp;&nbsp;{{result}}

</div>

new Vue({

el:'#app',

data:{

n:1

},

computed:{

result(){

return this.n*this.n;

}

}

});

我们用监听属性实现，监听n变量；

new Vue({

el:'#app',

data:{

n:1,

result:1

},

watch:{

n(newN,oldN){

console.log(newN,oldN);

this.result=newN*newN;

}

}

});

监听属性写法有两种，上面我们搞的是 配置方式，还有一种是写事件代码方式，$watch；

let vm=new Vue({

el:'#app',

data:{

n:1,

result:1

}

});

 vm.$watch("n",function(newN,oldN){

console.log(newN,oldN);

this.result=newN*newN;

 });