Vue.js每天必学之计算属性computed与$watch

下面是详细讲解 Vue.js 中计算属性 computed 与 $watch 的攻略。

计算属性 computed

概念

计算属性是一种带有缓存功能的属性，它依赖于其它属性值，并且其返回值会根据这些被依赖的值变化而改变。计算属性除了需要响应式依赖，还可以拥有自己的缓存，只要它所依赖的属于没有发生改变，那么多次读取该计算属性时，只会进行一次计算。

用法

我们可以在 Vue 组件的 computed 选项中定义计算属性，computed 的属性值应该是一个返回数据的函数。在模板中使用计算属性时就像使用普通属性一样，我们可以像绑定普通属性一样绑定计算属性，例如：{{computedProp}}。

示例说明

下面我们来看两个问题，如何将价格转换为美元($)和欧元(€)。对于上述问题，可以使用计算属性来实现。

<template>
  <div>
    <h2>价格</h2>
    <p>原价：{{price}}元</p>
    <p>美元价格：{{priceDollar}}$</p>
    <p>欧元价格：{{priceEuro}}€</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: 100,
      exchangeRate: {
        dollar: 0.14,
        euro: 0.118,
      },
    };
  },
  computed: {
    priceDollar() {
      return (this.price * this.exchangeRate.dollar).toFixed(2);
    },
    priceEuro() {
      return (this.price * this.exchangeRate.euro).toFixed(2);
    },
  },
};
</script>

在上面的代码中，我们定义了一个 price 属性表示价格，exchangeRate 属性表示汇率，我们分别定义了两个计算属性 priceDollar 和 priceEuro，在 priceDollar 中通过乘以相应汇率计算了美元价格，在 priceEuro 中通过乘以相应汇率计算了欧元价格。最后在模板中分别使用了 priceDollar 和 priceEuro 来展示相应的价格。

$watch

概念

$watch 是一个实例方法，它用于监听 Vue 实例属性的变化，当一个被监听的对象发生变化时，$watch 会执行响应的处理函数。

用法

Vue 实例可以使用 $watch 方法观察一个表达式的变化，表达式可以是一个函数或者是一个字符串。在观察期间，每当表达式的值发生改变时，$watch 将调用绑定的回调函数。

vm.$watch(expOrFn, callback, [options]);

以上代码中，expOrFn 表示被监听的属性或者函数，callback 表示属性变化时执行的回调函数，options 表示一些选项。

示例说明

下面我们来看一个问题，输入框中实时展示输入文字的长度。

<template>
  <div>
    <h2>输入框</h2>
    <p>已输入{{inputLength}}个字符</p>
    <input v-model="inputText" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputText: '',
      inputLength: 0,
    };
  },
  watch: {
    // 监听 inputText 的长度变化，更新 inputLength
    inputText: function(val) {
      this.inputLength = val.length;
    },
  },
};
</script>

在上面的代码中，我们定义了一个 inputText 属性表示输入框中的文本，inputLength 表示输入文本的长度，我们定义了一个 $watch 监听 inputText 的变化，每当 inputText 发生变化时，$watch 会调用定义的处理函数，将 inputText 的长度赋值给 inputLength，从而展示输入文本的长度。最后在模板中展示了输入文本的长度和实时更新的输入框。