computed 与 watch

参考教程：Vue.js的computed和watch是如何工作的？ (opens new window)

[TOC]

一、计算属性 computed

• 计算属性，类似于过滤器，对绑定到视图的数据进行处理，并监听变化进而执行对应的方法。

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

let vm = new Vue({
    el: '#example',
    data: {
        message: 'Hello',
    },
    computed: {
        reversedMessage： function () {
            return this.message.split('').reverse().join('')
        }
    }
})

计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。值得注意的是“reversedMessage”不能在组件的props和data中定义，否则会报错。

二、侦听属性 watch

参考链接：https://cn.vuejs.org/v2/api/#watch

• 一个侦听的动作，用来观察和响应 Vue 实例上的数据变动。

• 使用 watch 选项允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

三、异同

3.1 相同

computed和watch都起到监听/依赖一个数据，并进行处理的作用。

3.2 不同

• computed主要用于对同步数据的处理
• watch则主要用于观测某个值的变化去完成一段开销较大的复杂业务逻辑。
• 能用computed的时候优先用computed，避免了多个数据影响其中某个数据时多次调用watch的尴尬情况。