computed、watch和methods特性比较

计算属性(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('')
        }
    }
})

计算属性缓存(computed) vs 方法(methods)

使用方法实现同样的效果：

<p>Reversed message: "{{reversedMessage()}}"</p>

methods: {
    reversedMessage: function () {
        return this.message.split('').reverse().join('');
    }
}

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。不同的是计算属性是基于它们的依赖进行缓存。计算属性只有在它的相关依赖发生改变时才会重新求值。

为什么需要缓存？
假设我们有一个性能开销比较大的的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。

计算属性(computed) vs 侦听属性(watch)

侦听属性

<div id="demo">{{ fullName }}</div>

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

上面的代码是命令式的。如果用computed改造：

var vm = new Vue({
    el:'#demo',
    data: {
        firstName: 'Foo',
        lastName: 'Bar'
    },
    computed: {
        fullName: function () {
            return this.firstName + this.lastName;
        }
    }
})

计算属性的setter

计算属性默认只有getter，不过在你需要时你也可以提供一个setter：

computed: {
    fullName: {
        get: function () {
            return this.firstName + this.lastName;
        },
        set: function (newValue) {
            var names = newValue.split(' ');
            this.firstName = names[0];
            this.lastName = names[names.length - 1];
        }
    }
}

这时运行vm.fullName = 'John Doe'时，setter会被调用，vm.firstName和vm.lastName 也会被相应的更新。

侦听器(watch)使用

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。