因?yàn)槟０逯蟹湃胩嗟倪壿嫊?huì)讓模板過重且難以維護(hù)垛吗，因此我們想有了模板內(nèi)的表達(dá)式是非常便利的织堂，但是它們實(shí)際上是用于簡單運(yùn)算的叠艳。
區(qū)別
1#computed:計(jì)算屬性將被混入到vue實(shí)例中，所有g(shù)etter和setter的this上下文自動(dòng)綁定vue實(shí)例
2#watch：是一種更通用的方式來觀察和響應(yīng)vue實(shí)例上的數(shù)據(jù)變動(dòng),鍵是需要觀察的表達(dá)式捧挺，值是對應(yīng)回調(diào)函數(shù)虑绵。值可以是方法名，或者包含選項(xiàng)的對象闽烙。vue實(shí)例將會(huì)在實(shí)例化時(shí)調(diào)用$watch(),遍歷watch對象的每一個(gè)屬性翅睛。
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){
//回調(diào)函數(shù)的具體內(nèi)容
})
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);
})
