一、業(yè)務(wù)需求
在一個(gè)擁有4個(gè)步驟的單向流程（Flow）中柿冲，需要在第2步展現(xiàn) A 組件，第4步展現(xiàn) B 組件兆旬，在第1、3步的時(shí)候隱藏組件怎栽。在有組件展示的步驟里丽猬，會(huì)傳給組件的4組不同的數(shù)據(jù)（param），組件需要根據(jù)傳入的數(shù)據(jù)做一些業(yè)務(wù)操作熏瞄。
二脚祟、需求分析
- 在同一個(gè)地方有組件間的切換，可采用動(dòng)態(tài)組件
component强饮。 - 對(duì)一個(gè)組件來(lái)說(shuō)由桌，當(dāng)傳入?yún)?shù)改變的時(shí)候，需要有相應(yīng)的動(dòng)作，所以可用
watcher監(jiān)聽傳入的參數(shù)是否改變行您。 - 組件需要隱藏 / 顯示铭乾，可考慮使用
v-if或者v-show -
v-if會(huì)重新創(chuàng)建組件（這是所謂開銷大的一方面），有些組件自己維護(hù)的狀態(tài)是不能保留的
三娃循、偽代碼
/*
* A.vue
* 組件A
*/
<template lang="pug">
div
p {{param.text}}
</template>
<script>
export default {
name: 'A',
props: [ 'param' ],
watch: {
param: () => {
...
}
}
}
</script>
組件 B 和組件 A 類似炕檩，除了 name: 'B'，所以略過(guò)了捌斧。
/*
* Flow.vue
*/
<template lang="pug">
div
div#container(v-if='show')
component(
:is='view'
:param='param'
)
</template>
<script>
import A from 'A.vue'
import B from 'B.vue'
export default {
name: 'Flow',
components: { A, B },
data() {
return {
show: false,
view: null,
param: null
}
},
mounted() {
this.view = 'A'
setTimeout(() => {
// 經(jīng)過(guò)1秒以后流程進(jìn)入第二步
this.param = { ... } // 模擬第一次傳入數(shù)據(jù)
this.show = true // 顯示組件
// ... 其余步驟模擬略過(guò)
}, 1000)
}
}
</script>
當(dāng) Flow 的 mounted 執(zhí)行的時(shí)候笛质，A 中的 param watcher 并不會(huì)被執(zhí)行；若把 Flow 中的 v-if 改成 v-show捞蚂，則 param watcher 會(huì)被執(zhí)行妇押。
四、分析
當(dāng)使用 v-show 的時(shí)候姓迅，this.view = 'A' 的時(shí)候舆吮，A 組件已經(jīng)完成了初始化（會(huì)觸發(fā) mounted），此時(shí) A 組件拿到的 param 是 null队贱，所以當(dāng) param 在 Flow 中被賦值的時(shí)候色冀，會(huì)觸發(fā) watcher 事件。注意：在切換 view 的時(shí)候柱嫌，把新組件的一些初始化操作放到 vm.$nextTick 的回調(diào)里面锋恬。
而使用 v-if的話，A 組件的初始化會(huì)被延遲到 this.show = true 的時(shí)候编丘，此時(shí) A 組件拿到的 param 是已經(jīng)被賦過(guò)值的了与学。
