一、computed

computed 用来计算属性，Vue 官方建议对于任何复杂逻辑，都应当使用 computed。

以下是 vue 官网中的代码示例：

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

结果：

Original message: "Hello"
Computed reversed message: "olleH"

computed不需要括号，可以像用属性一样用\

一些特性

根据依赖会自动缓存，如果依赖不变，那么就不需要重新计算值

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

• 不支持异步，当 computed 内有异步操作时无效，无法监听数据的变化

• computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于 data 中声明过或者父组件传递的props中的数据通过计算得到的值

• 如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed

• 如果 computed 属性值是函数，那么默认会走 get 方法；函数的返回值就是属性的属性值；在computed 中的，属性都有一个 get 和一个 set 方法，当数据变化时，调用 set 方法。

二、watch

一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个 property。

一些特性

• 不支持缓存，在数据发生改变时，会直接触发相应的操作；

• watch 支持异步；

• 监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；

• 当一个属性发生变化时，需要执行对应的操作；一对多；

• 监听数据必须是 data 中声明过或者父组件传递过来的 props 中的数据，当数据变化时，触发其他操作，函数有两个参数：

immediate

组件加载立即触发回调函数执行

watch: {
  firstName: {
    handler(newName, oldName) {
      this.fullName = newName + ' ' + this.lastName;
    },
    // 代表在wacth里声明了firstName这个方法之后立即执行handler方法
    immediate: true
  }
}

deep

deep的意思就是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，但是这样性能开销就会非常大了，任何修改 obj 里面任何一个属性都会触发这个监听器里的 handler

watch: {
  obj: {
    handler(newName, oldName) {
      console.log('obj.a changed');
    },
    immediate: true,
    deep: true
  }
}