vue例項生命週期易錯點

2021-08-08 04:31:17 字數 1107 閱讀 5578

1、為什麼元件也有生命週期?它和例項生命週期有什麼關係?元件和例項又是什麼關係?

當我說生命週期時,我想到了兩個生命週期,分別是例項生命週期和元件生命週期。官方文件《元件系統》一章,清楚地說明了:

每個頁面都是乙個元件樹:

元件是例項的擴充套件,擴充套件了一些選項。元件是一塊可重用的**。

「在 vue 裡,乙個元件本質上是擁有預定義選項的乙個 vue 例項」。預定義選項,如生命週期鉤子等。

說到預定義選項,就必須看一看構造器了。

當我們建立乙個例項的時候,new了乙個 vue()。vue是個構造器,各種選項所組成的物件是它的引數。

var vm = new vue()
如果我想擴充套件構造器,這樣寫:

var mycomponent = vue.extend();

var myvm = new mycomponent();

擴充套件例項沒有掛載點,需要手動掛載

div>

div>

-------------------------------

//手動掛載,會覆蓋掉box:

new mycomponent().$mount('#box');

//或者這樣手動掛載

new mycomponent();

下面是元件和擴充套件例項的關係,擴充套件例項就是它的底層實現:

vue.component("mycard",}})

//直接寫標籤

mycard>

var mycomponent = vue.extend(

}});var mycard = new mycomponent();

//命令式掛載,box決定掛載的位置

mycard.$mount("#box");

vue例項生命週期

每個 vue 例項在被建立之前都要經過一系列的初始化過程。例如需要設定資料監聽 編譯模板 掛載例項到 dom 在資料變化時更新 dom 等。同時在這個過程中也會執行一些叫做生命週期鉤子的函式,給予使用者機會在一些特定的場景下新增他們自己的 beforecreate 在例項初始化之後,資料觀測和事件配...

Vue例項生命週期

vue例項在建立時有一系列的初始化步驟,例如建立資料觀察,編譯模板,建立資料繫結等。在此過程中,我們可以通過一些定義好的生命週期鉤子函式來執行業務邏輯。本文將詳細介紹vue例項的生命週期 下圖是vue例項生命週期的圖示 接下來,根據提供的生命週期鉤子,對vue例項各個階段的情況進行詳細說明 befo...

Vue 例項的生命週期

在vue中,每個例項都有自己的乙個完整的生命週期,包括開始建立 初始化資料 編譯模板 將例項掛載到dom 渲染 更新 渲染 解除安裝等一系列過程。同時在這個過程中也會執行一些叫做生命週期鉤子的函式,這樣我們就可以在例項生命週期的不同階段做一些需要做的事情。這裡可能會有個小疑惑,怎麼突然又說是vue例...