一、動態(tài)組件、keep-alive、$refs、webpack分包、異步組件

1、實現(xiàn)下面效果，用v-if如何實現(xiàn)？

image.png

image.png

2、上述代碼有沒有更加優(yōu)雅的實現(xiàn)方式呢？

• 使用內(nèi)置的動態(tài)組件
• 動態(tài)組件是使用 component組件，通過一個特殊的attribute is 來實現(xiàn)

image.png

image.png

3、上面兩種實現(xiàn)方式，如果想做頁面緩存要怎么做？

• 在開發(fā)中某些情況，我們希望繼續(xù)保持組件的狀態(tài)，而不是銷毀掉，這個時候我們就可以使用一個內(nèi)置組件：keep-alive

image.png

image.png

4、對keep-alive的組件，如果要監(jiān)聽頁面的消失和出現(xiàn)要怎么辦？

image.png

5、我們在組件中想要直接獲取到元素對象或子組件實例要怎么辦？

image.png

6、root （了解即可）。

image.png

7、在webpack項目中，如何對部分js代碼在build的時候，進行分包？

image.png

8、vue中的異步組件（了解即可，用到再說）

image.png

image.png

image.png

二、生命周期

1、一般組件有哪幾個生命周期？

• 每個組件都可能會經(jīng)歷從 創(chuàng)建、掛載、更新、卸載等一系列的過程；

image.png

2、生命周期流程圖，要一眼能看懂！

image.png

三、組件的v-model（高級）

1、v-model 默認做了那兩件事？

• 前面我們在input中可以使用 v-model 來完成雙向綁定
• v-bind:vale的數(shù)據(jù)綁定 + @input的事件監(jiān)聽；

image.png

2、那么如何在自定義組件上使用 v-model 呢？

image.png

image.png

3、那么如何在自定義組件上使用 多個 v-model 呢？

image.png