1.計(jì)算屬性
為避免模板內(nèi)嵌表達(dá)式過(guò)于復(fù)雜應(yīng)使用計(jì)算屬性代替
<div>{{myMessage}}</div>
var app = new Vue({
el: "#app",
data: {
message: "lulu"
},
computed:{
//聲明一個(gè)計(jì)算屬性myMessage
myMessage: function () {
//聲明依賴(lài)message，易于測(cè)試推理
return this.message.toUpperCase();
}
}
});
- 計(jì)算屬性基于其依賴(lài)進(jìn)行緩存坛缕，只有在依賴(lài)發(fā)生改變時(shí)才會(huì)重新求值猫牡，優(yōu)于使用method
- 當(dāng)有一些數(shù)據(jù)需要隨其他數(shù)據(jù)變動(dòng)時(shí)胡诗，優(yōu)于使用watch
計(jì)算屬性默認(rèn)只有g(shù)etter,但也可以添加setter
var app = new Vue({
el: "#app",
data: {
message: "lulu",
},
computed: {
myMessage: {
// getter
get: function () {
return this.message.toUpperCase();
},
// setter
set: function (newValue) {
this.message = newValue;
}
}
}
});
//設(shè)置計(jì)算屬性myMessage導(dǎo)致message更新
app.myMessage = "lululu";
2.觀(guān)察者watch
Vue通過(guò)watch提供一個(gè)更通用的方法，響應(yīng)數(shù)據(jù)變化
var app = new Vue({
el: "#app",
data: {
message: "",
searchKey: ""
},
watch: {
//searchKey變化就會(huì)執(zhí)行函數(shù)
searchKey: function (newValue) {
this.message = "Waiting...";
//一個(gè)異步或開(kāi)銷(xiāo)較大的操作,計(jì)算屬性無(wú)法做到
this.search();
}
},
methods: {
search: _.debounce(function(){
}, 500)
}
});
