vue宣告週期 VUE知識點集錦

2021-10-14 09:25:02 字數 2261 閱讀 2992

mvvm模式

核心理念:

通過宣告式的資料繫結 來實現 view 層和其他層的分離;

model 層

model 層,對應資料層的域模型,它主要做域模型的同步。通過 ajax/fetch 等 api 完成客戶端和服務端業務 model 的同步。在層間關係裡,它主要用於抽象出 viewmodel 中檢視的 model。(域模型:融合了行為和資料的域的物件模型)

view 層

view 層,作為檢視模板存在,在 mvvm 裡,整個 view 是乙個動態模板。除了定義結構、布局外,它展示的是 viewmodel 層的資料和狀態。view 層不負責處理狀態,view 層做的是 資料繫結的宣告、 指令的宣告、 事件繫結的宣告。

viewmodel 層

viewmodel 層把 view 需要的層資料暴露,並對 view 層的 資料繫結宣告、 指令宣告、 事件繫結宣告 負責,也就是處理 view 層的具體業務邏輯。viewmodel 底層會做好繫結屬性的監聽。當 viewmodel 中資料變化,view 層會得到更新;而當 view 中宣告了資料的雙向繫結(通常是表單元素),框架也會監聽 view 層(表單)值的變化。一旦值變化,view 層繫結的 viewmodel 中的資料也會得到自動更新。

模式

mvvm作為資料繫結的入口,整合observer、compile和watcher三者,通過observer來監聽自己的model資料變化,通過compile來解析編譯模板指令,最終利用watcher搭起observer和compile之間的通訊橋梁,達到資料變化 -> 檢視更新;檢視互動變化(input) -> 資料model變更的雙向繫結效果。(observer:資料***,觀察者;compile:指令編譯器;watcher:訂閱者;)

vue的生命週期

所有的vue應用都是從這裡開始的,當例項化出vue物件時就已經進入了vue的生命週期。

1)進入的生命週期第乙個鉤子函式就是beforecreate。在這之前元件還沒有真正的初始化。

2)在beforecreate之後,vue對data物件作了getter/setter處理,並且將物件放在乙個observe裡面以便於監控物件,另外還有使用initevents繫結事件

3)在元件初始化完成後,遇到第二個鉤子函式:created。在這個階段我們可以訪問到了data的屬性以及繫結的事件

4)通過了created階段後元件的生命週期到了beforemount,在這個階段dom結構還沒有生成,但是已經建立了el,元件掛載的根節點。在beforemount執行完成後開始渲染dom,執行_render方法,_mount方法,然後會有new出乙個watcher物件,形成vnode節點,然後會更新dom

5)渲染完畢後元件就會到了下乙個生命週期mounted,一般的非同步請求都會寫在這,這個階段dom已經渲染出來了。至此乙個元件已經完整的出現在眼前了,但是生命週期卻還沒有停止。

6)當元件需要更新的時候生命週期會先到達beforeupdate,在這個階段顯示資料並沒有更新,但是dom中的資料已經改變了,這是因為雙向繫結的關係

7)走過beforeupdate元件完成了更新,生命週期走到updated

8)完成更新後的元件應該被銷毀了,beforedestroy,這個階段元件還沒有被銷毀

destroy這個是真正的銷毀

computed和watch的區別

computed: -->計算屬性

1支援快取,只有依賴資料發生改變,才會重新進行計算

2)不支援非同步

3)如果乙個屬性是由其他屬性計算而來,這個屬性依賴其他屬性,多對一(多個值影響乙個值)的情況一般用computed;

watch: -->監聽屬性

監聽屬性;一定是存在的屬性;是data中的屬性;

1)不支援快取,資料變化,直接會觸發相應的操作

2)支援非同步

3)當乙個屬性發生變化時,需要執行對應的操作;一對多(乙個值影響多個值)的情況一般用watch;

Vue知識點集錦

一 使用了vue的頁面,肯定會經歷乙個完整的生命週期,與一般的普通頁面是不一樣的,所以直接獲取dom結構是獲取不到的,只有在mounted之後才能獲取到 servicemanagementaddcrud.vueinit function 一些dom操作,在vue的mounted 函式裡面再進行繫結 ...

vue非同步請求和同步 VUE知識點集錦

mvvm模式 核心理念 通過宣告式的資料繫結 來實現 view 層和其他層的分離 model 層 model 層,對應資料層的域模型,它主要做域模型的同步。通過 ajax fetch 等 api 完成客戶端和服務端業務 model 的同步。在層間關係裡,它主要用於抽象出 viewmodel 中檢視的...

Vue常用知識點

使用cdn 通過npm安裝 npm install vue 獲取當前繫結的元素獲取當前繫結的資料 vm.data 更換data物件重新整理檢視,盡量不去更換 監控模型的變化 vm.watch message function newval,oldval 生命週期 3.3 屬性的計算1.vue中的閃爍...