Vue入门教程06-侦听器

一、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.