computed
场景：当需要对data的数据进行显示计算时；
Original message: "{
{ message }}"Computed reversed message: "{
{ reversedMessage }}"
var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // 计算属性的 getter reversedMessage: function () { // `this` 指向 vm 实例 return this.message.split('').reverse().join('') } }}) 计算属性缓存 vs 方法
计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。（不接受新的参数，只是基于data里面的数据进行计算）
方法是只要其他数据发生变化，触发重新渲染时，调用方法将总会再次执行函数，性能开销比较大。（可以接受参数）watch
场景：监听到数据的变化，去指定响应的操作
var vm = new Vue({ data: { a: 1, b: 2, c: 3, d: 4, e: { f: { g: 5 } } }, watch: { a: function (val, oldVal) { //变化后的值，变化前的值 console.log('new: %s, old: %s', val, oldVal) }, // 方法名 b: 'someMethod', // 深度 watcher，可以观察objecct的所有数据变化，性能开销比较大；可以监听'e.a'这个属性进行监听 c: { handler: function (val, oldVal) { /* ... */ }, deep: true }, // 该回调将会在侦听开始之后被立即调用 d: { handler: function (val, oldVal) { /* ... */ }, immediate: true }, e: [ function handle1 (val, oldVal) { /* ... */ }, function handle2 (val, oldVal) { /* ... */ } ], // watch vm.e.f's value: {g: 5} 'e.f': function (val, oldVal) { /* ... */ } }})vm.a = 2 // => new: 2, old: 1