vue.js中的计算属性（computed）和观察者（$watc

因为模板中放入太多的逻辑会让模板过重且难以维护，因此我们想有了模板内的表达式是非常便利的，但是它们实际上是用于简单运算的。

区别

1#computed:计算属性将被混入到vue实例中，所有getter和setter的this上下文自动绑定vue实例

2#watch：是一种更通用的方式来观察和响应vue实例上的数据变动,键是需要观察的表达式，值是对应回调函数。值可以是方法名，或者包含选项的对象。vue实例将会在实例化时调用$watch(),遍历watch对象的每一个属性。

computed 的基本例子

<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedmsg }}"</p>
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// a computed getter
reversemsg:function(){
return this.message.split("").reverse().join("")
}
})

效果：

Original message: "Hello"
Original message: "Hello"

$watch案例

vm.$watch(“datasha属性”, function(newVal, oldVal){
//回调函数的具体内容
})

var vm = new Vue({
el: "#app",
data: {
a: 1
},
methods: {
add: function () {
this.a++;
}
},
computed: {
b: function () {
var str = "";
for (var i = 0; i < this.a; i++) {
str += String(i);
}
return str;
}
}
})
vm.$watch("b", function (val) {
alert(val);
})