動(dòng)態(tài)添加的屬性不是響應(yīng)式的
(對(duì)于被Object.defineProperty修飾過的屬性可以成為響應(yīng)式屬性话告。)
如果要向響應(yīng)式對(duì)象中添加一個(gè)響應(yīng)式的屬性兼搏,且觸發(fā)視圖更新。
想要沙郭?如下:
//Vue無法探測(cè)普通的新增屬性
this.myObject.newProperty = 'hi'
//破解方法 vm.$set(target, key, value)
this.$set(this.MyObject, 'newProperty', 'hi)
或
Vue.set(this.MyObject, 'newProperty', 'hi')
變異方法
變異方法(mutation method)佛呻,會(huì)改變被這些方法調(diào)用的原始數(shù)組。
push()
pop()
shift()
unshift()
sort()
reverse()
調(diào)用以上變異方法的時(shí)候病线,會(huì)觸發(fā)視圖更新吓著。
對(duì)應(yīng)的,也有非變異方法(non-mutating method)
filter()
concat()
slice()
這些方法不改變?cè)紨?shù)組送挑,但是會(huì)返回一個(gè)新數(shù)組绑莺。
如果利用索引設(shè)置一個(gè)項(xiàng),Vue是檢測(cè)不到改動(dòng)的让虐。破解方法參考以上動(dòng)態(tài)添加屬性紊撕。
監(jiān)聽器
vue實(shí)例提供了一個(gè)watch屬性,用于監(jiān)聽vue實(shí)例中屬性的變化赡突。
<script>
var vm = new Vue({
el:'...',
data:{...},
//watch對(duì)應(yīng)了一個(gè)屬性
watch:{
//msg:鍵对扶,觀察的屬性
//funtion:值,對(duì)應(yīng)的回調(diào)函數(shù)
msg:function(value, [oldvalue]){
...
}
}
})
</script>
如果要監(jiān)視一個(gè)對(duì)象中內(nèi)部屬性的改變惭缰,需要加上deep:true屬性浪南,否則vue無法監(jiān)聽到內(nèi)部值的變化。
watch:{
user:{
deep:true,
hander:funtion(curr, old){
...
}
}
}
添加immediate屬性表示立馬進(jìn)行監(jiān)聽漱受。
計(jì)算屬性
當(dāng)計(jì)算屬性依賴的數(shù)據(jù)發(fā)生改變時(shí)络凿,計(jì)算屬性會(huì)重新計(jì)算一次,如果計(jì)算屬性依賴的屬性沒有發(fā)生改變昂羡,那么計(jì)算屬性就不會(huì)重新計(jì)算絮记。
var vm = new Vue({
el: '#app',
data: { n1:'', n2:'' },
//n3依賴與n1和n2的值,當(dāng)n1 和 n2發(fā)生改變的時(shí)候虐先,這個(gè)函數(shù)就會(huì)執(zhí)行怨愤。
//返回值就是n3的值
computed: {
n3(){
return +this.n1 + +this.n2;
}
}
});
計(jì)算屬性是基于它們的依賴項(xiàng)進(jìn)行緩存的,即上例中n3基于n1和n2進(jìn)行了緩存蛹批,如果n1和n2的值沒有發(fā)生改變撰洗,那么多次訪問n3時(shí),計(jì)算屬性會(huì)返回之前的的計(jì)算結(jié)果腐芍,而不會(huì)再執(zhí)行函數(shù)差导。
計(jì)算屬性不能和data中的屬性同名,因?yàn)闊o論是data屬性還是計(jì)算屬性猪勇,最終都是掛載到vm上的设褐。
計(jì)算屬性默認(rèn)只有g(shù)etter,不過在需要是可以自己設(shè)置一個(gè)setter
computed: {
fullName: {
// getter
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]
}
}
}