vue 计算属性computed和观察watch 和方法methods

vue.js官方文档计算属性代码：

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: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}

，
methods：｛

fullName: function () {
return this.firstName + ' ' + this.lastName
}

｝
})

计算属性好处：
1.计算属性可以简化页面逻辑。如果页面版模中逻辑比较复杂而且此逻辑需要多次使用可以声明一个计算属性，这样子页面中逻辑可以更加简单。

2.计算属性通过其他变量计算得来的另一个属性，因此它具有依赖性，就像this.fullName依赖this.lastName。

3.计算属性具有缓存性。计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。

methods方法：

1.methods方法在某些情况下可以达到和computed相同的结果，但是methods没有缓存。computed 属性会基于它所依赖的数据进行缓存，

只要 依赖数据没有发生变化，多次访问 computed 属性

fullName

，将会立刻返回之前计算过的结果，而不必每次都重新执行函数。

但是有些情况我们不需要缓存数据，所以使用methods方法。

观察：

1.watch是检测当某个数据发生变化是调用该方法。可以在执行异步操作得到某个数据是使用。这也是为什么watch存在的原因。