Vue学习笔记：Vue.js 监听属性watch

本文主要是介绍Vue学习笔记：Vue.js 监听属性watch，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

这篇关于Vue学习笔记：Vue.js 监听属性watch的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---