如何使用 vue + typescript 編寫頁面 （Vue生命週期函式）
摘要：
每一個mvvm框架，生態週期顯得格外重要，vue有哪些生態函式，可以看一下，和使用方式
Vue生命週期函式簡單羅列
詳細解答可以參照選項 / 生命週期鉤子
1. beforeCreate
模組建立之前，this指向的為物件本身，並沒有任何實際操作
2. created...
每一個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>
時，進入頁面路由對映的元件時觸發