计算属性和侦听器

1、计算属性缓存 VS 方法

将一个函数定义为计算属性和方法得到的结果是相同的。但不同的是计算属性是基于它们的依赖进行缓存的，只是在相关依赖发生改变时才会重新求值。

//方法

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

//计算属性

computed: {
  now: function () {
    return Date.now()
  }
}

 

2、计算属性 VS 侦听属性

侦听属性：观察和响应Vue实例上的数据变动——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     }   } })

上面代码是命令式且重复的。将它与计算属性的版本进行比较：

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