计算属性computed

vue官方文档：计算属性

计算属性和方法的区别

第 1 章：计算属性的基本用法

<template>
  <div class="computed">
    <p>{{ number }}</p>
    <p>double: {{ double1 }}</p>
    <input type="text" v-model="double2" />
  </div>
</template>

<script type="text/javascript">
export default {
  data () {
    return {
      number: 5
    }
  },
  computed: {
    // 计算属性基本用法
    double1 () {
      return this.number * 2
    },
    /**
     *  当计算属性和v-model混合使用，会出现的问题
     *  控制台报错：Computed property "double2" was assigned to but it has no setter
     *  因为计算属性默认只有 getter，不过在需要时你也可以提供一个 setter：
     */
    double2: {
      get: function () {
        return this.number * 2
      },
      set: function (newValue) {
        this.number = newValue / 2
      }
    }
  }
}
</script>

第 2 章：计算属性 和 方法的区别

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。

然而，不同的是：

• 当触发重新渲染时，调用方法将总会再次执行函数

• 计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。

意味着只要 响应式依赖的数据 没有发生改变， 计算属性会立即返回之前的计算结果，而不必再次执行函数