VUE-4:組件生命週期、動態組件、插件、動畫

組件生命週期

        組件生命週期指的是組件從創建到銷燬的過程,在這個過程中的一些不同的階段,`vue` 會調用指定的一些組件方法

                基本生命週期函數有下面幾個階段:

                        - 創建階段

                        - 掛載階段

                        - 更新階段

                        - 卸載階段

                每一個階段都對應着 之前 和 之後 兩個函數


創建階段

        beforeCreate()

                初始化階段,應用不多

        created()

                在實例創建完成後被立即調用,該階段完成了對 `data` 中的數據的 `observer`,該階段可以處理一些異步任務


掛載階段

        beforeMount()

                在掛載開始之前被調用,應用不多

        mounted()

                該階段執行完了模板解析,以及掛載。同時組件根組件元素被賦給了 `$el` 屬性,該階段可以通過 DOM 操作來對組件內部元素

                進行處理了


更新階段

        beforeUpdate()

                數據更新時調用,但是還沒有對視圖進行重新渲染,這個時候,可以獲取視圖更新之前的狀態

        updated()

                由於數據的變更導致的視圖重新渲染,可以通過 DOM 操作來獲取視圖的最新狀態


卸載階段

        beforeDestroy()

                實例銷燬之前調用,移除一些不必要的冗餘數據,比如定時器

        destroyed()

                Vue 實例銷燬後調用

        errorCaptured()

                當捕獲一個來自子孫組件的錯誤時被調用,此鉤子會收到三個參數:錯誤對象、發生錯誤的組件實例以及一個包含錯誤來源

                信息的字符串。此鉤子可以返回 `false` 以阻止該錯誤繼續向上傳播。

定時器手動清理:

組件銷燬了,但定時器一直在運行,需要手動清理


ef 與 $refs

    如果我們希望獲取組件節點,進行 DOM 相關操作,可以通過 `ref` 和 `$refs` 來完成

$refs

        該屬性的是一個對象,存儲了通過 `ref` 綁定的元素對象或者組件實例對象

nextTick

        當數據更新的時候,視圖並不會立即渲染,這個時候我們期望獲取到視圖更新後的數據,可以通過 `nextTick` 來進行操作

        `nextTick` 方法將在更新隊列循環結束之後立即調用


動態組件

        有的時候,我們需要在多個不同的組件之間進行切換。雖然我們可以通過 <u>v-if</u> 來處理,但是會比較麻煩,`vue` 提供了一個

        更方便的方式來處理這種情況

component 組件

        `component` 是 `vue` 內置的一個組件,它提供一個 `is` 屬性用來動態渲染不同的組件

        我們會發現,當組件切換的時候,都會觸發組件的銷燬和重建。首先,性能不好。其次,會丟失組件狀態


keep-alive 組件

        當在這些組件之間切換的時候,有時會想保持這些組件的狀態,以避免反覆重渲染導致的性能問題。`keep-alive` 是一個內置容器

        組件, 使用 `>keep-alive` 以後,內部包含的組件將增加 `激活` 和 `失活/凍結` 的狀態

生命週期

        使用了 `keep-alive` 的組件會觸發 `activated`、`deactivated` 兩個生命週期函數

activated

        `keep-alive` 組件激活時調用

`deactivated`

        `keep-alive` 組件停用時調用


插件

        插件通常是用來給 `vue` 提供擴展功能的一種方式

                - 給 `Vue` 添加屬性和方法

                - 給 `Vue 實例` 添加屬性和方法

                - 添加全局資源:指令、過濾器、組件等

                - 添加配置選項

安裝插件

        通過全局方法 `Vue.use()` 使用插件。它需要在調用 `new Vue()` 啓動應用之前完成

        如果插件是一個對象,必須提供 `install` 方法。如果插件是一個函數,它會被作爲 `install` 方法。`install` 方法調用時,

        會將 Vue 作爲參數傳入

實例

axios

        https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js

        修改 `prototype` 會修改整個 `Vue` 原型鏈

另外一種方式

案例:


動畫

        在 `vue` 中給組件或元素添加動畫的方式可以分爲多種,但總體無非還是通過 `css` 和 `JavaScript` 來進行處理

CSS

        通過 `css` 添加動畫的方式特別的簡單,只需要利用 `css` 中的 `transition` 就可以做到


vue 中的動畫處理

        在 `vue` 中基本和上面的處理方式是一樣的

動畫生命週期

        `vue` 爲元素和組件的幾個特殊的情況提供了對應的處理方式

transition 組件

過渡類名

        - `v-enter`:定義進入過渡的開始狀態。在元素被插入之前生效,在元素被插入之後的下一幀移除

        - `v-enter-active`:定義進入過渡生效時的狀態。在整個進入過渡的階段中應用,在元素被插入之前生效,在過渡/動畫完成之後移除。

                                      這個類可以被用來定義進入過渡的過程時間,延遲和曲線函數

        - `v-enter-to`: **2.1.8版及以上** 定義進入過渡的結束狀態。在元素被插入之後下一幀生效 (與此同時 `v-enter` 被移除),在過渡/動畫

                              完成之後移除

        - `v-leave`: 定義離開過渡的開始狀態。在離開過渡被觸發時立刻生效,下一幀被移除

        - `v-leave-active`:定義離開過渡生效時的狀態。在整個離開過渡的階段中應用,在離開過渡被觸發時立刻生效,在過渡/動畫完成之後

                                      移除。這個類可以被用來定義離開過渡的過程時間,延遲和曲線函數

        - `v-leave-to`: **2.1.8版及以上** 定義離開過渡的結束狀態。在離開過渡被觸發之後下一幀生效 (與此同時 `v-leave` 被刪除),

                              在過渡/動畫完成之後移除


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章