vue之生命週期鉤子及父子間傳值

2022-08-14 04:45:17 字數 1014 閱讀 3510

vue生命週期鉤子函式(目前有11個,8個常用的)

(1)beforecreate(建立前)

詳  細:在例項初始化之後,資料觀測和event/watcher事件配置之前被呼叫

元件狀態:例項初始化之後,this指向建立的例項,不能訪問到data、computed、watch、methods上的方法和資料

最佳實踐:常用於初始化非響應式變數

(2)created(建立後)

在例項建立完成後被立即呼叫;

例項已完成:資料觀測,屬性和方法的運算,watch/event事件**;

掛載還沒開始,$el屬性(檢視)目前不可見。

($el --> vue例項使用的跟dom元素)

元件狀態:例項建立完成,可訪問data、computed、watch、methods上的方法和資料,未掛載到dom,不能訪問到$el屬性,$ref屬性內容為空陣列

最佳實踐:常用於簡單的ajax請求,頁面的初始化

(3)beforemount(載入前)

在掛載開始之前被呼叫:相關的render函式首次被呼叫

(在服務端渲染期間不被呼叫)

元件狀態:在掛載開始之前被呼叫,beforemount之前,會找到對應的template,並編譯成render函式

(4)mounted(載入後)

el被新建立的vm.$el替換,並掛載到例項上去之後呼叫

所有的子元件不一定都會被掛載,想要等整個檢視都渲染完畢,可以用vm.$nexttick替換掉mounted:

mounted:function()(簡寫)

或props:

}(1)僅當子元件完成掛載後,父元件才會掛載  

(2)當子元件完成掛載後,父元件會主動執行一次beforeupdate/updated鉤子函式(僅首次)

(3)父子元件在data變化中是分別監控的,但是在更新props中的資料是關聯的(可實踐)

(4)銷毀父元件時,先將子元件銷毀後才會銷毀父元件

當父元件資料變化,子元件觸發更新

用watch監聽父元件

vue 之 生命週期 鉤子

生命週期函式 是由vue框架提供的內建函式,會伴隨著元件的生命週期,自動按次序執行.vue元件的生命週期函式,可以分為三大類 第乙個階段 初始化階段 1 beforecreate vue例項初始化 2 created 初始化完成,傳送ajax 3 beforemount 模版和資料結合掛載頁面沒有渲...

Vue之生命週期和生命週期鉤子

生命週期 指的是vm例項建立 執行 銷毀期間的各種事件。生命週期鉤子 生命週期事件 生命週期函式。生命週期主要分為三類 1.建立 這些函式均只在建立階段執行一次 beforecreate 此階段vm例項在內存在建立出來 只有預設的生命週期函式和一些預設的事件 但是data和method屬性沒有初始化...

vue生命週期鉤子

el 表示dom元素,data 表示資料 deforecreated el和data並未初始化 created 完成了data資料的初始化,el沒有 beforemount 完成了el和data初始化 mounted 完成掛載 el和data都初始化完成,並且掛載在頁面上了 注意 以下勾子只能在 k...