Vue 2.0学习笔记之Vue中的computed属性

下面我将为你详细讲解“Vue 2.0学习笔记之Vue中的computed属性”的完整攻略。

什么是computed属性

在Vue组件中，数据是驱动视图变化的，我们可以通过绑定数据到视图的方式达到数据驱动视图的目的。但是，有时候我们需要通过一些计算规则得到一些派生数据来执行视图渲染，此时我们就可以使用computed属性。computed属性可以将计算属性绑定到Vue实例中，它的值会随其中的数据变化而自动更新，从而实现数据驱动视图。

如何使用computed属性

computed属性可以通过methods属性中定义一个函数，函数返回计算结果即可。我们还可以使用Vue提供的computed属性来定义计算属性，示例如下：

<template>
  <div>
    <p>原始数据：{{num}}</p>
    <p>平方数：{{computedNum}}</p>
    <button @click="addNum">增加num</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 2
    };
  },
  computed: {
    computedNum() {
      return this.num ** 2;
    }
  },
  methods: {
    addNum() {
      this.num++;
    }
  }
};
</script>

在上述代码中，我们定义了一个num变量，然后定义了一个computed属性computedNum，它会随着num变化而自动更新计算结果。我们在模板中引用了这个computed属性来显示平方数。此外，我们还定义了一个按钮来增加num的值，这样computedNum也会随之更新。 运行上述代码后，我们点击按钮可以看到，num的数值增加了，而平方值computedNum也实时更新了。这就体现了computed属性的实时计算和更新机制。

computed属性的注意事项

1. computed属性的定义只能是一个函数立即返回计算结果，而不能有其他业务逻辑。
2. computed属性的值是响应式的，当其中的数据发生变化时，这个属性的值也会自动更新。
3. computed属性是基于对计算结果的缓存的，也就是说，只有在监听的依赖值发生变化时，计算结果才会重新计算。因此，应该尽可能使用简单而非长时间运算的computed属性，以避免性能问题。

以上就是关于Vue中computed属性的详细攻略。通过这篇文章，你应该对computed属性的应用场景有了更深入的理解，并掌握了computed属性在Vue中的使用方法。