Python知識(shí)分享網(wǎng) - 專業(yè)的Python學(xué)習(xí)網(wǎng)站 學(xué)Python,上Python222
2023最新前端-Vue面試題匯總 PDF 下載
發(fā)布于:2023-10-25 09:30:09
(假如點(diǎn)擊沒反應(yīng),多刷新兩次就OK!)

2023最新前端-Vue面試題匯總 PDF 下載  圖1

 

 

 

 

資料內(nèi)容:

 

 

2. 雙向數(shù)據(jù)綁定的原理
Vue.js 是采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式,通過
Object.defineProperty()來劫持各個(gè)屬性的 setter,getter,在數(shù) 據(jù)
變動(dòng)時(shí)發(fā)布消息給訂閱者,觸發(fā)相應(yīng)的監(jiān)聽回調(diào)。主要分為以下幾 個(gè)
步驟:
1.需要 observe 的數(shù)據(jù)對(duì)象進(jìn)行遞歸遍歷,包括子屬性對(duì)象的屬性,
都加上 setter 和 getter 這樣的話,給這個(gè)對(duì)象的某個(gè)值賦值,就會(huì)
觸發(fā) setter,那么就能監(jiān)聽到了數(shù)據(jù)變化
2.compile 解析模板指令,將模板中的變量替換成數(shù)據(jù),然后初始化 渲
染頁(yè)面視圖,并將每個(gè)指令對(duì)應(yīng)的節(jié)點(diǎn)綁定更新函數(shù),添加監(jiān)聽數(shù) 據(jù)
的訂閱者,一旦數(shù)據(jù)有變動(dòng),收到通知,更新視圖
3.Watcher 訂閱者是 Observer 和 Compile 之間通信的橋梁,主要
做 的事情是: ①在自身實(shí)例化時(shí)往屬性訂閱器(dep)里面添加自己 ②
自身必須有一個(gè) update()方法 ③待屬性變動(dòng) dep.notice()通知時(shí),
能調(diào)用自身的 update()方法,并觸發(fā) Compile 中綁定的回調(diào),則成
功 成身退。
2 / 524.MVVM 作為數(shù)據(jù)綁定的入口,整合 Observer、Compile 和
Watcher 三者,通過 Observer 來監(jiān)聽自己的 model 數(shù)據(jù)變化,通
過 Compile 來解析編譯模板指令,最終利用 Watcher 搭起
Observer 和 Compile 之間的通信橋梁,達(dá)到數(shù)據(jù)變化 -> 視圖更新;
視圖交互變化(input)-> 數(shù)據(jù) model 變更的雙向綁定效果。