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 选项提供了一个更通用的方法，来响应数据的变化。当须要在数据变化时执行异步或开销较大的操做时，这个方式是最有用的。