如何使用 vue + typescript 編寫頁面 （Vue生命週期函數）

每個mvvm框架，生態週期顯得格外重要，vue有哪些生態函數，能夠看一下，和使用方式

Vue生命週期函數簡單羅列

詳細解答能夠參照 選項 / 生命週期鉤子

1. beforeCreate

模塊建立以前，this指向的爲對象自己，並無任何實際操做

2. created

全部的getters，data，等等被觀測完成，此時能夠獲取到data內容

3. beforeMount

檢測是否是有el相關的內容，若是沒有則中止向下執行，直到vm.$mount(el)掛載上真實元素 此時已經能夠獲取到被建立的 this.$el

該鉤子在服務器端渲染期間不被調用

3.1 render

在Vue中，還有一個render函數，用來渲染頁面。可是Component是沒有的

<div id="app">
    html 模板
</div>
<script> new Vue({ el:"#app", template:"template模板", render(r){ r('h1','函數渲染模板') } }) </script>
複製代碼

render函數選項 > template選項 > html模板.

4. mounted

該鉤子在服務器端渲染期間不被調用。

頁面模板解析完成後，此時一切準備就緒，可是並不能必定保證全部的子組件被掛載到頁面上，若是此時須要用到dom元素的內容時，最好使用this.$nextTick()

5. activated

該鉤子在服務器端渲染期間不被調用

這個周期函數是引入vue-router後，啓用<keep-alive>時，進入頁面路由映射的組件時觸發

6. beforeUpdate

該鉤子在服務器端渲染期間不被調用，由於只有初次渲染會在服務端進行

當data數據被修改後，虛擬dom更新實際dom前調用

7. updated

該鉤子在服務器端渲染期間不被調用

頁面dom替換完成後調用

8. deactivated

該鉤子在服務器端渲染期間不被調用

路由離開當前頁面前調用

9. beforeDestroy

該鉤子在服務器端渲染期間不被調用

組件被銷燬前調用

10. destroyed

該鉤子在服務器端渲染期間不被調用 組件銷燬後調用

11. errorCaptured

攔截子組件的錯誤 return false阻止繼續冒泡

上一章 如何使用 vue + typescript 編寫頁面 ( vuex裝飾器補充部分--store裝飾器 )