Vue 簡單理解生命週期

2021-10-08 13:52:17 字數 1048 閱讀 6729

請先看官方圖示 點我鏈結

簡單化理解只有四個步驟,每個都有前置函式before(create/mount/update/destroy)

1. 初始化:new vue() -> beforecreate -> created

2. 當el選項繫結時 || 使用$mount繫結時:brforemount -> mounted

3. data資料更新時:brforeupdate  ->  updated(即為data資料發生改變時會呼叫,若發生改變的資料未在頁面渲染使用 或 賦值與原先值相同 則不會呼叫)

4. 銷毀時:beforedestroy->destroyed

例項**如下:

let vm = new vue(,

beforecreate() ,

created() ,

beforemount() ,

mounted() ,

beforeupdate() ,

updated() ,

beforedestroy() ,

destroyed()

})

渲染函式的比較

render > template > outerhtml

outerhtml: 原本 html 節點下的html**

簡單理解為有render渲染render中的**,有templaterender渲染template中**,都將覆蓋outerhtml**

vue生命週期理解

關於vue面試,最常問到的就是vue的生命週期,也看過很多關於如何回答過這個問題的解答,自己也有所總結,就簡單寫寫自己的看法。首先我們先來到vue的官網看看他是如何解釋的vue官網對生命週期描述 主要就是體現在這個圖上 可以看出生命週期中有8個主要的鉤子函式,分別是 activated與deacti...

vue生命週期 鉤子理解

在vue文件中,對生命週期部分有如下檢視 建立vue例項 init events lifecycle 開始初始化 beforecreate 元件剛被建立,組建屬性計算之前,如data屬性等 init injections reactivity 通過依賴注入匯入依賴項 created 元件例項建立完成...

Vue 生命週期的理解

最近做了幾個vue的專案,寫寫對生命週期的理解,先看圖 這些圖是網路的,侵權必刪beforecreate 元件剛建立,資料和dom都未初始化,我們在beforecreate的時候千萬不要去修改data裡面賦值的資料,最早也要放在created裡面去做 新增一些行為此時的this,並不會指向例項物件 ...