vue 中 computed 与 methods 区别 + watch

1. 有时我们会在模板中添加一些复杂的逻辑，或者是对于组件中 data 对象中的属性进行一些操作后，再将其展示在页面上。此时可以应用 computed.

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

【这里我直接 copy 官方文档的例子】

<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('')
    }
  }
})

2. 也许你会发现，computed 里面完成的操作似乎也可以在 methods 中完成，但它们之间具有某些不同之处.

computed 会基于 Vue 的响应式依赖对数据进行缓存处理，这意味着如果计算属性所依赖的数据没有发生改变，多次访问一个计算属性时，它会从缓存中取数据展示，提高了性能；相比之下，methods 中的方法不会进行缓存，这就说明每当你调用一次方法，你都会重复的执行一些代码，会使得性能开销比较大.

3. computed 虽然形式上类似于方法的定义，但其实际是一个对象，对象包括 getter 和 setter 方法，默认只提供 getter，必要时可以自己设置 setter，因为基本上用不到 setter，因此在语法上，Vue 帮我们做了简化，直接使用方法定义形式，即可定义 getter 方法内容.

4. watch 监听器，可以帮助我们监听属性值的变化，并进行某些操作.

  data: {
    question: '',
    answer: 'I cannot give you an answer until you ask a question!'
  },
  watch: {
    // 如果 `question` 发生改变，这个函数就会运行
     question: function () {
        this.answer = 'Waiting for you to stop typing...'
　　　}
  }

在一些情况下，watch 可以完成的操作，computed 也可以完成，但是在 数据变化时需要执行异步操作 或者 数据变化开销比较大 时，我们建议采用 watch.

 【2021-11-08 更新】

watch 在监听属性时，可以接收两个参数，第一个是更新后的值，第二个是更新前的值。

watch 在监听对象时，如果不只是希望监听所指向的对象地址的改变，而想监听对象属性的变化，则需要添加 deep: true 进行深度监听，但它只是检测到对象属性的变化，并不能确定是具体哪个属性变化。

watch 如果监听的是父组件传到子组件 props 中的属性值，并且希望组件一旦创建就立刻执行一次 watch，需要添加 immediate: true。

 

总结：1. computed 支持缓存，watch 不支持缓存

2. computed 不支持异步操作，watch 支持异步操作