vue相關知識點

2021-10-25 04:42:05 字數 1693 閱讀 6434

breforcreate()——建立前

在vue被建立前el和data都沒有被初始化,沒有methods,data,computed等方法

created()——建立後

在vue被建立後,這裡可以呼叫methods方法來改變data的值,獲取computed,寫一些非同步的網路請求,因為這個時候data已經通過了object.defineproperty的方法劫持和新增觀察者模式,資料已經能夠支援雙線資料繫結了,created會在munted前執行,所以同樣的請求時間的話,把請求放在created中更好

breformounte()——掛載前

頁面在掛載前的話就是把data裡的資料和模板生成乙個html,完成了el和data的初始化(這時候還沒有掛載html頁面)

mounted()——掛載後

這時候頁面已經渲染了可以對dom進行一些操作,例如this.$refs.xx來獲取dom元素

breforupdata()——更新前

這裡需要注意的是這個鉤子函式只是針對於檢視層的,比如我檢視層沒有任何的標籤,但是我在mounted中進行更改data資料,這時候呢beforeupdata就不會觸發,因為檢視層並沒有發生變化,但是如果我們在檢視層加上乙個p標籤,這時候在mounted中對p的內容進行修改的話就會觸發,還有在這個鉤子函式中更改data的時候不會進入迴圈,因為mounted更新的資料還沒有更新到檢視層,所以這個也就不會再次觸發這個鉤子函式

updated()——更新後

更新後呢這裡就要注意了不能再去改變data資料了,因為這裡已經對檢視層進行了更改這時候再去更改data的話會進入死迴圈

brefordestory()——銷毀前

這裡需要注意的是哪些操作會觸發這個鉤子函式,首先是v-if,因為v-if的實現原理就是對dom的刪除的新增,接著是元件的切換,同乙個頁面切換不同的元件也會觸發,然後是通過this.$destroy進行內部銷毀(內部銷毀不會移出dom),常用的方法是銷毀一些計時器,這裡還是可以獲取到dom的

destoryed()——銷毀後

這裡的話就會移出事件監聽和子例項都會被銷毀

vue雙向資料繫結是通過資料劫持結合發布者-訂閱者的方式來實現的,

如何實現?

在data中定義乙個物件,我們列印這個物件的話會有乙個get和set的兩個方法,因為vue是通過object.definpropery進行資料劫持的,這裡的object.definproperty中就有set和get兩個屬性,

get的話是在讀取這個資料的時候會呼叫,set是在設定的時候呼叫,這個就是資料劫持的基本原理

實現mvvm主要呢還是包含了兩個方面,資料變化更新檢視,檢視變化更新資料

試圖變化更新資料的話很容易實現,比如input標籤監聽input時間就可以了,主要還是實現資料變化更新檢視

資料變化更新檢視就是利用乙個***observe對資料的屬性進行監聽,在監聽資料的過程中,會為 data 中的每乙個屬性生成乙個主題物件 dep

在complie的時候會為每個與資料繫結相關的節點生成乙個訂閱者 watcher,watcher 會將自己新增到相應屬性的 dep 中

在vscode中一起使用會出現編輯器報錯,因為v-for的優先順序要比v-if高

三 vue元件相關知識點

1 父vue中component 即子vue 引入 2 從父vue中向component 即子vue 內傳值 3 在父vue中呼叫子vue中的方法 父vue的html中 將ids繫結在子元件 的string上 父js 子vue中 這個結構看著有點亂,其實裡面包含了三個知識點 1 父vue中compo...

Vue中元件相關知識點

一 元件知識點 1.定義 何為元件,簡單來說,元件就是一組html標籤的集合,有點類似於模組,不過模組是基於不同的業務邏輯來劃分的,而元件則是基於頁面不同區域來劃分的。元件中允許有多個標籤,但只允許乙個根標籤。元件的產生同樣也增強了 的復用性。2.建立方式 建立元件例項可以有多種方式,這裡主要講解其...

與Vue相關的知識點

1 vue是漸進式框架 2 vue.js的兩個核心是什麼?資料驅動 資料的改變會驅動檢視的自動更新,傳統的做法是需要手動改變dom來是的檢視更新,而vue只需要改變資料 元件化 元件化開發,可以很好的降低資料之間的耦合度,將常用的 封裝成元件之後,就能高度復用,提高 的可重用性。3 v if 於v ...