Vue入门教程--vue的监听属性watch详解（article:15）

Vue.js 初步入门

---

watch：Vue.js 监听属性 watch，我们可以通过 watch 来响应数据的变化。

使用简介

watch属性，可以监听data属性域中的数据变化，并可以事实采用函数相应变化。
首先在data域中定义一个msg属性，用来被监听。

data:{
	msg:'hello vue'
}

接着，我们将data中的数据用v-model实时绑定到自定义的文本框中。

<input type="text" placeholder="请输入任意字符" v-model="msg"/>

最后，用watch监听器将msg属性关联起来。

vm.$watch("msg",function(nval,oval){
	alert(`原数${oval}变成了${nval}`);
});
//vm是Vue实例的引用
//回调函数第一个属性nval(now value)表示改变过msg后最终的值
//回调函数第二个属性oval(old value)表示改变msg前的值

最终效果如图所示：

属性详解

我们写一个km/h和m/s相互换算的小应用。
首先要在data属性中定义两个速度的变量。

data:{
	kPerSecond:0,
	mPerSecond:0
}

定义属性watch，用来监听多个属性：

			watch:{
				mPerSecond:function(){
					this.kPerSecond = this.mPerSecond*3.6;
				},
				kPerSecond:function(){
					this.mPerSecond = this.kPerSecond/3.6;
				}
			}

简而言之，只要mPerSecond发生改变，kPerSecond也会相应的发生改变，
反过来也同理。

可以这样简单的理解，外部调用的vm.$watch，只能观察一个值发生的变化，而内部定义的watch可以同时监听多个属性，且用相应的方法响应处理。

Tip

watch属性和v-model属性有类似的地方，都是实时监听相应值的改变而做出实时的改变，但v-model的局限是只能对数进行操作，而做不到回调函数的响应。
watch属性和computed属性也有类似的地方，但computed响应后将原来的数据变量名改成了属于它自己的变量名，只能单向操作。

这些属性都有属于自己的应用场合，灵活运用才能发挥他们最大的作用。

---