- 應(yīng)用場景：
數(shù)據(jù)通過異步操作后，對(duì)之前剛加載的數(shù)據(jù)進(jìn)行變更后，發(fā)現(xiàn)數(shù)據(jù)不能生效 - 實(shí)現(xiàn)目的：
使組件強(qiáng)制二次渲染 - 解決方案：
當(dāng)數(shù)據(jù)變更后,通過watch 監(jiān)聽，先去銷毀當(dāng)前的組件，然后再重現(xiàn)渲染。使用 v-if 可以解決這個(gè)問題
<template>
<third-comp v-if="reFresh"/>
</template>
<script>
export default{
data(){
return {
reFresh:true,
menuTree:[]
}
},
watch:{
menuTree(){
this.reFresh= false
this.$nextTick(()=>{
this.reFresh = true
})
}
}
}
</script>
通過vue
key實(shí)現(xiàn)，原理官方文檔。所以當(dāng)key 值變更時(shí)，會(huì)自動(dòng)的重新渲染。
<template>
<third-comp :key="menuKey"/>
</template>
<script>
export default{
data(){
return {
menuKey:1
}
},
watch:{
menuTree(){
++this.menuKey
}
}
}
</script>
卡布奇諾、
