組件生命週期
組件生命週期指的是組件從創建到銷燬的過程,在這個過程中的一些不同的階段,`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` 被刪除),
在過渡/動畫完成之後移除