beforecreate建立前
created建立後
beforemountvue裝載dom之前
mountedvue裝載dom之後
beforeupdate資料改變出發，改變前
updated資料改變出發改變後
beforedestory元件銷毀前
destoryed元件銷毀後
beforeactive元件停用
actived元件啟用
html
<
!doctype html>
"en"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
"x-ua-compatible" content=
"ie=edge"
>
document<
/title>
'../node_modules/vue/dist/vue.js'
>
<
/script>
<
/head>
'root'
>
<
/div>
'main.js'
>
<
/script>
<
/body>
<
/html>
let test =
} 點我
`, data:
function()
},// 對應父元件 v-if false 就銷毀當前元件
beforedestroy()
,destroyed()
,// 銷毀，最終都是做一些其他功能的釋放，比如：資料儲存到localstorage
// 有keep-alive的時候，v-if控制的是元件的啟用與停用
activated()
,deactivated()
,// created和actived 都是v-if='true'子元件的狀態
// actived被keep-alive包裹，created沒有
// 銷毀和停用同上
beforecreate()
,created()
,// 使用該元件，就會觸發以上的事件函式（鉤子函式）
// created中可以運算元據 並且可以實現vue-頁面的影響， 應用：發起ajax請求
beforemount()
,mounted()
,//基於資料改變，影響頁面
beforeupdate()
,updated()
,// 以上兩個當有更改資料才會觸發
// 應用：beforeupdate 可以獲取原dom
// update可以獲取新dom
// beforemount vue啟動前的dom
// mounted vue啟動後的dom，只載入一次},
data()
},template:
`
子元件銷毀與建立
子元件停用與啟用，keep-alive是vue內建元件
`}new
vue(
, template:
})
Vue元件的生命週期
有乙個需要是分別在建立b元件和b bro元件時利用事件匯流排 on 註冊 乙個事件，在銷毀元件前 off 登出 這個事件，開始我是分別在created中 on，在beforedestory中 off，但是發現b bro中的事件註冊不上該事件，最後發現是生命週期的原因 b bro beforecrea...
vue元件生命週期詳解
簡單概括就是 乙個元件或者 頁面 載入過程中所經歷的每個階段。因為有一些初始化操作，需要在元件或者頁面載入完成之後就自動執行，不需要人為進行操作 僅以 new vue 舉例，一共需要經歷 四個階段 建立階段 create 掛載階段 mount 更新階段 update 銷毀階段 destroy 建立階...
vue元件的生命週期
beforecreate 實列建立之前。created 實列建立完成。beforemount 掛載開始之前被呼叫。mounted 實列掛載到dom上 beforeupdate 響應式資料更新時呼叫 updated 虛擬dom重新渲染和打補丁之後呼叫 beforedestroy 實列銷毀之前呼叫 de...