五 前端總結 之框架 Vue 篇

2022-08-30 05:09:10 字數 2038 閱讀 3649

在下次 dom 更新迴圈結束之後執⾏延遲**,可⽤於獲取更新後的 dom 狀態

新版本中預設是 mincrotasks , v-on 中會使⽤

macrotasks macrotasks 任務的實現:

setimmediate / messagechannel / settimeout

init

initlifecycle/event ,往vm上掛載各種屬性

callhook: beforecreated : 例項剛建立

initinjection/initstate : 初始化注⼊和 data 響應性

created: 建立完成,屬性已經繫結, 但還未⽣成真實 dom`

進⾏元素的掛載: $el / vm.$mount()

是否有 template : 解析成 render function

*.vue ⽂

件 : vue-loader 會將編

譯成 render function

beforemount : 模板編譯/掛載之前

執⾏ render function ,⽣成真實的 dom ,並替換到 dom tree 中

mounted : 元件已掛載update

執⾏ diff 演算法,⽐對改變是否需要觸發 ui 更新

flushschedulequeue

watcher.before : 觸發 beforeupdate 鉤⼦ - watcher.run() : 執⾏ watcher 中的

notify ,通知所有依賴項更新ui觸發 updated 鉤⼦: 元件已更新

actived / deactivated(keep-alive) : 不銷毀,快取,元件啟用與失活

destroy

beforedestroy : 銷毀開始

銷毀⾃身且遞迴銷毀⼦元件以及事件監聽

remove() : 刪除節點

watcher.teardown() : 清空依賴

vm.$off() : 解綁監聽

destroyed : 完成後觸發鉤⼦

上⾯是vue的宣告週期的簡單梳理,接下來我們直接以**的形式來完成vue的初始化

new

vue({}) //

初始化vue例項

function

_init() }

//掛載節點實現

function

mountcomponent(vm) = compiletofunctions() this.options.render = render}//

觸發鉤⼦

callhook('beforemounte')

//初始化觀察者

//render 渲 染 vdom,

vdom =vm.render()

//update: 根據 diff 出的 patchs 掛載成真實的 dom vm._update(vdom)

//觸發鉤⼦

callhook(vm, 'mounted')}

//更新節點實現

funtion queuewatcher(watcher) //

清空佇列

function

flushschedulequeue() }

//銷毀例項實現

vue.prototype.$destory = function

()

j陣列變化也能監聽到

不需要深度遍歷監聽

let data = 

let reactivedata = new

proxy(data, ,

//...

})

hash

history

跳轉this.$router.push()

佔位

state : 狀態中⼼

mutations : 更改狀態

actions : 非同步更改狀態

getters : 獲取狀態

modules : 將 state 分成多個 modules ,便於管理

前端框架之Vue介紹

庫只是乙個工具,供我們使用 框架是具有思維的,有它自己生態系統 前端這個崗位是從後端慢慢分出來 jq 2010前 mvc思想 軟體架構 為什麼前端要從後端引入mvc這個思想?cmd mvc衍生架構 vue mvvm angular2.0 mvvm 2016年 如何高效的將伺服器資料渲染到前端介面 如...

前端總結之Vue

前端總結vue diff patch.js 以前是樹形結構比對,現在是diff演算法 生命週期 兩個核心 資料驅動和元件系統 ie 9以上幾乎沒有相容問題,是因為ie9可以支援object.defineproperty 響應式布局,nresize function watch computed區別 ...

總結 前端框架 react還是vue?

之前寫了一篇前端框架的大彙總,主要介紹了當下主流的框架和其特性。最近除了bootstrap,就屬react和vue最為熱門,這篇就主要拿這兩個框架來做一下詳細對比。究竟如何正確使用?作為小白的我們從何學起比較好?帶著一系列問題來看看吧。這篇主要介紹 1 從出身背景 優勢 缺點 適合場景 開發模式 實...