Vue中的computed是什么？怎么用？

提示：前端查漏补缺，仅代表个人观点，不接受任何批评

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、computed是什么？

• 类型：{ [key: string]: Function | { get: Function, set: Function } }
• 计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例
• computed(计算属性)可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新。computed设置的初衷是能够解决复杂的计算，而不是直接在模板字符串里进行运算。

代码如下（示例）：

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

---

二、使用注意事项

1.计算属性的结果会被缓存

• 除非依赖的响应式 property 变化才会重新计算。注意，如果某个依赖 (比如非响应式 property) 在该实例范畴之外，则计算属性是不会被更新的。

代码如下（示例）：

var vm = new Vue({
  data: { sum: 1 },
  computed: {
    // 仅读取
    aDouble: function () {
      return this.sum * 2
    },
    // 读取和设置
    aPlus: {
      get: function () {
        return this.sum + 1
      },
      set: function (v) {
        this.sum = v - 1
      }
    }
  }
})
vm.aPlus   // => 2
vm.aPlus = 3
vm.id       // => 2
vm.aDouble // => 4

2.computed和method的区别

• computed具有响应式（双向数据绑定），以属性方式调用，如：this.reversedMessage

• methods需以函数方式调用，如：this.reversedMessage()

• computed具有缓存功能，只要里面的数据不发生改变，就不会重新计算；methods每次调用都重新计算一次，也就是说使用了computed只有它们计算依赖的值发生变化的时候才会进行重新计算，这样大大提高了性能。相比之下，每当触发重新渲染时，method将总会再次执行函数。

这里要注意的一点是，Date.now()将会在执行一次以后失去作用

computed: {
  now: function () {
    return Date.now()
  }
}

---

总结

1. 使用场景

• computed用来监控自己定义的变量，这个变量受多个数据影响，实现在页面上进行双向数据绑定展示出结果或者用作其他处理（该变量不在data里面声明，直接在computed里面定义）

• computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，(一个数据受多个数据影响)。
  举例：购物车里面的商品列表和总金额之间的关系，购物车商品数量发生改变，总金额也都应该发生变化。这个时候用computed进行双向数据绑定就是最佳的选择。

2. watch和computed区别

computed:

• 支持缓存，只有依赖数据发生改变，才会重新进行计算
• 不支持异步

watch：

• 不支持缓存，数据变，直接会触发相应的操作
• watch支持异步
• 监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值

watch擅长处理的场景：一个数据影响多个数据
computed擅长处理的场景：一个数据受多个数据影响