computed、watch和methods特性比较-白红宇

计算属性(computed)

举例：


        
     Original message: "{
   {message}}"
    
     Computed reversed message: "{
   {reversedMessage}}"
    
复制代码

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

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

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

Reversed message: "{
   {reversedMessage()}}"
复制代码

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

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

为什么需要缓存？

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

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

侦听属性


    
     {
   { fullName }}
    
复制代码

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