Vue中计算属性（ computed）VS方法（methods）VS侦听属性（watch）

methods 适合业务逻辑处理，不会缓存、每次都重新计算属性

watch 适合监听单个数据。watch监听的是data中定义的变量，当该变量变化时，会触发watch即当被监视的属性变化时，回调函数自动调用，进行相关操作。

computed适合监听多个数据，可以缓存计算的值，方便下次使用。

计算属性（ computed）

若模板内的表达式放入过多的逻辑会然模板过重且难以维护，故对于复杂的逻辑，都应采用计算属性

如下例所示

<div id="example">

<p>Original message: "{{ message }}"</p>

<p>Computed reversed message: "{{ reversedMessage }}"</p>

</div>



var vm = new Vue({

el: '#example',

data: {

message: 'Hello'

},

computed: {

// 计算属性的 getter

reversedMessage: function () {

// `this` 指向 vm 实例

return this.message.split('').reverse().join('')

}

}

})

计算属性缓存（computed）VS方法（ methods）

在表达式调用方法也可以达到相同的效果，如下所示：

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


// 在组件中

methods: {

reversedMessage: function () {

return this.message.split('').reverse().join('')

}

}

方法每当重新触发渲染时，调用方法将总会再次执行函数。但是计算属性是基于它们的响应式依赖进行缓存的。只有响应式依赖发生改变时它们才会重新求值。即message的值只要不改变，多次访问reverseMessage计算属性会立即返回之前的计算结果，而不必再次执行函数。

计算属性（ computed）VS侦听属性（ watch）

侦听属性可以用来观察和响应Vue实例上的数据变动。两种写法：1.new Vue时传入watch配置。2.通过vm.$watch监视。

computed能完成功能，watch都能完成，但是watch能完成的功能，computed不一定能完成，如watch可以进行异步操作。（所有被Vue管理的函数，最好写成普通函数、这样this的指向才是vm或者组件实例；所有不被Vue所管理的函数如定时器的回调函数、ajax的回调函数，最好写成箭头函数，这样this的指向才是vm或组件实例对象）

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

computed: {

fullName: {

// getter 当有人读取fullName时，get会被调用，其值为fullName的值，初次读取fullName与所依赖的数据发生改变是调用get

get: function () {

return this.firstName + ' ' + this.lastName

},

// setter

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 也会相应地被更新。