2018.1.17補(bǔ)充說(shuō)明
糾結(jié)的問(wèn)題終于被解決了
引起這個(gè)坑的原因是父組件，父組件foo的數(shù)據(jù)更新后，模板里調(diào)用了foo，導(dǎo)致子組件虛擬節(jié)點(diǎn)被 re-render
坑終于被填上了。
之前的內(nèi)容
標(biāo)題很繞，我也不知道我在說(shuō)什么
先來(lái)看兩個(gè)父子組件：
父組件
<template>
<child-component :foo.sync="foo" :bar="[]"/>
</template>
data () {
return {
foo: []
}
}
子組件
<template>
<Button @click="$emit('update:foo', [])">emit</Button>
</template>
props: {
foo: Array,
bar: Array
}
- 子組件接受
foo、bar兩個(gè)props，類型都是Array（引用類型） - 子組件通過(guò)點(diǎn)擊按鈕向父組件
emit事件，給父組件的foo重新賦值一個(gè)空數(shù)組 - 父組件bar是通過(guò)字面量傳值
于是乎，坑爹的地方來(lái)了
此時(shí)，我們?cè)谧咏M件里watch bar的變化
watch: {
bar (val) {
console.log(val)
}
}
bar是父組件通過(guò)字面量傳入進(jìn)來(lái)的，理論上不會(huì)有任何變化，但每點(diǎn)擊一次，都會(huì)觸發(fā)watch，控制臺(tái)會(huì)打印bar的值，每次都是一樣的空數(shù)組
我們修改下父組件，不通過(guò)字面量，而是data里顯式聲明了bar
<template>
<child-component :foo.sync="foo" :bar="bar"/>
</template>
data () {
return {
foo: [],
bar: []
}
}
這時(shí)watch沒(méi)有被觸發(fā)（計(jì)算屬性同理）
總結(jié)：
- 組件props盡量用值類型
- 引用類型不要用字面量
- props其它的引用類型的改變會(huì)觸發(fā)字面量prop的計(jì)算和watch（foo改變了但卻觸發(fā)了bar的重新計(jì)算）
- 這算不算是vue的底層bug？
