一、watch侦听属性
通过 watch 来响应数据的变化,下面实现一个港币-人民币兑换的功能:
<template>
<div id="hello">
<p>人民币/港币换算</p>
<p>人民币: <input type = "text" v-model = "rmb"></p>
<p>港币: <input type = "text" v-model = "hkDollar"></p>
</div>
</template>
<script>
export default {
name: 'hello',
data () {
return {
hkDollar:0,
rmb:0
}
},
watch:{
hkDollar:function (val) {
this.hkDollar = val;
this.rmb = this.hkDollar * 0.8;
},
rmb:function (val) {
this.rmb = val;
this.hkDollar = this.rmb / 0.8;
}
}
}
</script>
在watch 对象中创建了两个方法 hkDollar 和 rmb ,当输入框输入数据时,watch 会监听数据变化并改变自身的值。
二、计算属性和侦听器比较
大多数情况下计算属性更合适,但Vue也为我们提供了自定义的侦听器。通过 watch 选项提供了一个更通用的方法来响应数据的变化。如果需要在数据变化时执行异步或开销较大的操作时,侦听器是最有用的方式:
比如,我们想要限制执行该操作的频率,并在得到最终结果前,设置一个中间状态,这些都是计算属性不具备的特点。
END.