Vue.js 數據雙向綁定的實現

語言: CN / TW / HK

highlight: androidstudio theme: cyanosis


前言

在我們使用vue的時候,當數據發生了改變,界面也會跟着更新,但這並不是理所當然的,我們修改數據的時候vue是如何監聽數據的改變以及當數據發生改變的時候vue如何讓界面刷新的?

當我們修改數據的時候vue是通過es5中的Object.defineProperty方法來監聽數據的改變的,當數據發生了改變通過發佈訂閲模式統計訂閲者界面發生了刷新,這是一種設計模式

下圖,從new Vue開始創建Vue實例,會傳入el和data,data會被傳入一個觀察者對象,利用Object.definproperty將data裏數據轉化成getter/setter進行數據劫持,data裏的每個屬性都會創建一個Dep實例用來保存watcher實例

而el則傳入compile,在compile裏進行指令的解析,當解析到el中使用到data裏的數據會觸發我們的getter,從而將我們的watcher添加到依賴當中。當數據發生改變的時候會觸發我們的setter發出依賴通知,通知watcher,watcher接受到通知後去向view發出通知,讓view去更新

image.png

數據劫持

html部分創建一個id為app的div標籤,裏面有span和input標籤,span標籤使用了插值表達式,input標籤使用了v-model

```js

內容:{{content}}

```

js部分引入了一個vue.js文件,實現數據雙向綁定的代碼就寫在這裏面,然後創建Vue實例vm,把數據掛載到div標籤上

js const vm=new Vue({ el:'#app', data:{ content:'請輸入開機密碼' } })

new了一個Vue實例很明顯需要用到構造函數,在vue的源碼裏定義類是使用了function來定義的,這裏我使用ES6的class來創建這個Vue實例

然後設置constructor,形參設為obj_instance,作為new一個Vue實例的時候傳入的對象,並把傳進來的對象裏的data賦值給實例裏的$data屬性

在javascript裏對象的屬性發生了變化,需要告訴我們,我們就可以把更改後的屬性更新到dom節點裏,因此初始化實例的時候定義一個監聽函數作為調用,調用的時候傳入需要監聽的數據

```js class Vue{//創建Vue實例 constructor(obj_instance){ this.$data=obj_instance.data Observer(this.$data) } } function Observer(data_instance){//監聽函數

} ```

打印一下這個實例vm

image.png

實例已經創建出來了但是還需要為$data裏的每一個屬性進行監聽,要實現數據監聽就用到了Object.definePropertyObject.defineProperty可以修改對象的現有屬性,語法格式為Object.defineProperty(obj, prop, descriptor)

  • obj:要定義屬性的對象
  • prop:要定義或修改的屬性的名稱
  • descriptor:要定義或修改的屬性描述符

監聽對象裏的每一個屬性,我們使用Object.keys和foreach遍歷對象裏的每一個屬性並且對每一個屬性使用Object.defineProperty進行數據監聽

js function Observer(data_instance){ Object.keys(data_instance).forEach(key=>{ Object.defineProperty(data_instance,key,{ enumerable:true,//設置為true表示屬性可以枚舉 configurable:true,//設置為true表示屬性描述符可以被改變 get(){},//訪問該屬性的時候觸發,get和set函數就是數據監聽的核心 set(){},//修改該屬性的時候觸發 }) }) }

Object.defineProperty前需要將屬性對應的值存起來然後在get函數裏面返回出來,不然到了get函數以後屬性的值已經沒了,返回給屬性的值就變成了undefined

js let value=data_instance[key] Object.defineProperty(data_instance,key,{ enumerable:true, configurable:true, get(){ console.log(key,value); return value }, set(){} }) 點擊一下$data裏的屬性名就會觸發get函數

5.gif

然後設置set函數,為set設置形參,這個形參表示新傳進來的屬性值,然後將這個新的屬性值賦值給變量value,不需要return返回什麼,只做修改,返回是在訪問get的時候返回的,修改之後get也會訪問最新的value變量值

js set(newValue){ console.log(key,value,newValue); value = newValue }

6.gif

但是當前只為$data的第一層屬性設置了get和set,如果還有更深的一層如

js obj:{ a:'a', b:'b' } 這種的並沒有設置get和set,我們需要一層一層的往屬性裏面進行數據劫持,因此使用遞歸再次監聽自己,並在遍歷之前進行條件判斷,沒有子屬性了或者沒有檢測到對象就終止遞歸

js function Observer(data_instance){ //遞歸出口 if(!data_instance || typeof data_instance != 'object') return Object.keys(data_instance).forEach(key=>{ let value=data_instance[key] Observer(value)//遞歸-子屬性的劫持 Object.defineProperty(data_instance,key,{ enumerable:true, configurable:true, get(){ console.log(key,value); return value }, set(newValue){ console.log(key,value,newValue); value = newValue } }) }) }

還有一個細節,如果我們將$data的content屬性從字符串改寫成一個對象,這個新的對象並沒有get和set

1669019095973.png

因為我們在修改的時候根本沒有設置get和set,因此在set裏要調用監聽函數

js set(newValue){ console.log(key,value,newValue); value = newValue Observer(newValue) }

1669019254699.png

模板解析

劫持數據後就要把Vue實例裏的數據應用帶頁面上,得要加一個臨時內存區域,將所有數據都更新後再渲染頁面以此減少dom操作

創建一個解析函數,設置2個參數,一個是Vue實例裏掛載的元素,另一個是Vue實例,在函數裏獲取獲取元素保存在實例了的$el裏,獲取元素後放入臨時內存裏,需要用到[createDocumentFragment]創建一個新的空白的文檔片段

然後把$el的子節點一個一個加到fragment變量裏,頁面已經沒有內容了,內容都被臨時存在fragment裏了

js class Vue{ constructor(obj_instance){ this.$data=obj_instance.data Observer(this.$data) Compile(obj_instance.el,this) } } function Compile(ele,vm){ vm.$el=document.querySelector(ele) const fragment=document.createDocumentFragment() let child; while (child=vm.$el.firstChild){ fragment.append(child) } console.log(fragment); console.log(fragment.childNodes); }

image.png

現在直接把需要修改的內容應用到文檔碎片裏面,應用後重新渲染,只需修改了fragment的childNodes子節點的文本節點,文本節點的類型是3,可以創建一個函數並調用來修改fragment裏的內容

節點裏面可能還會有節點,因此判定節點類型是否為3,不是就遞歸調用這個解析函數

節點類型為3就進行修改操作,但也不行把整個節點的文本都修改,只需修改插值表達式的內容,因此要使用正則表達式匹配,將匹配的結果保存到變量裏,匹配的結果是一個數組,而索引為1的元素才是我們需要提取出來的元素,這個元素就是去除了{{}}和空格得到的字符串,然後就可以直接用Vue實例來訪問對應屬性的值,修改完後return出去結束遞歸

```js function Compile(ele,vm){ vm.$el=document.querySelector(ele) //獲取元素保存在實例了的$el裏 const fragment=document.createDocumentFragment() //創建文檔碎片 let child; while (child=vm.$el.firstChild){//循環將子節點添加到文檔碎片裏 fragment.append(child) }

fragment_compile(fragment) function fragment_compile(node){ //修改文本節點內容 const pattern = /{{\s(\S)\s*}}/ //檢索字符串中正則表達式的匹配,用於匹配插值表達式 if(node.nodeType===3){ const result = pattern.exec(node.nodeValue) if(result){ console.log('result[1]') const value=result[1].split('.').reduce(//split將對象裏的屬性分佈在數組裏,鏈式地進行排列;reduce進行累加,層層遞進獲取$data的值 (total,current)=>total[current],vm.$data ) node.nodeValue=node.nodeValue.replace(pattern,value) //replace函數將插值表達式替換成$data裏的屬性的值 } return } node.childNodes.forEach(child=>fragment_compile(child)) } vm.$el.appendChild(fragment) //將文檔碎片應用到對應的dom元素裏面 } ``` 頁面的內容又出來了,插值表達式替換成了vm實例裏的數據

image.png

image.png

訂閲發佈者模式

雖然進行了數據劫持,和將數據應用到頁面上,但是數據發生變動還不能及時更新,還需要實現訂閲發佈者模式

首先創建一個類用來收集和通知訂閲者,生成實例的時候需要有一個數組存放訂閲者的信息,一個將訂閲者添加到這個數組裏的方法和一個通知訂閲者的方法,調用這個方法就回去遍歷訂閲者的數組,讓訂閲者調用自身的update方法進行更新

js class Dependency{ constructor(){ this.subscribers=[] //存放訂閲者的信息 } addSub(sub){ this.subscribers.push(sub) //將訂閲者添加到這個數組裏 } notify(){ this.subscribers.forEach(sub=>sub.update()) //遍歷訂閲者的數組,調用自身的update函數進行更新 } }

設置訂閲者類,需要用到Vue實例上的屬性,需要Vue實例和Vue實例對應的屬性和一個回調函數作為參數,將參數都賦值給實例

然後就可以創建訂閲者的update函數,在函數裏調用傳進來的回調函數

js class Watcher{ constructor(vm,key,callback){//將參數都賦值給Watcher實例 this.vm=vm this.key=key this.callback=callback } update(){ this.callback() } }

替換文檔碎片內容的時候需要告訴訂閲者如何更新,所以訂閲者實例在模板解析把節點值替換內容的時候創建,傳入vm實例,exec匹配成功後的索引值1和回調函數,將替換文本的執行語句複製到回調函數裏,通知訂閲者更新的時候就調用這個回調函數

回調函數裏的nodeValue要提前保存,不然替換的內容就不是插值表達式而是替換過的內容

1669085039395.png

然後就要想辦法將訂閲者存儲到Dependency實例的數組裏,我們可以在構造Watcher實例的時候保存實例到訂閲者數組裏

Dependency.temp=this //設置一個臨時屬性temp

將新的訂閲者添加到訂閲者數組裏且還要將所有的訂閲者都進行同樣的操作,那麼就可以在觸發get的時候將訂閲者添加到訂閲者數組裏,為了正確觸發對應的屬性get,需要用reduce方法對key進行同樣的操作

32022edb035588799072d6ce8c9cf04.png

b6b1eb7db9110d36607b58ebcef28e4.png

可以看到控制枱打印出了Wathcer實例,每個實例都不同,都對應不同的屬性值

image.png

Dependency類還沒創建實例,裏面的訂閲者數組是不存在的,所以要先創建實例再將訂閲者添加到訂閲者數組裏

1669086610689.png

1669086716726.png

修改數據的時候通知訂閲者來進行更新,在set裏調用dependency的通知方法,通知方法就會去遍數組,訂閲者執行自己的update方法進行數據更新

1669087112449.png

但是update調用回調函數缺少設定形參,依舊使用split和reduce方法獲取屬性值

js update(){ const value =this.key.split('.').reduce( (total,current)=>total[current],this.vm.$data ) this.callback(value) }

在控制枱修改屬性值都修改成功了,頁面也自動更新了

6.gif

完成了文本的綁定就可以綁定輸入框了,在vue裏通過v-model進行綁定,因此要判斷哪個節點有v-model,元素節點的類型是1,可以使用nodeName來匹配input元素,直接在判斷文本節點下面進行新的判斷

js if(node.nodeType===1&&node.nodeName==='INPUT'){ const attr=Array.from(node.attributes) console.log(attr); } 節點名字nodeName為v-model,nodeValue為name,就是數據裏的屬性名

1669087923831.png

因此對這個數組進行遍歷,匹配到了v-model根據nodeValue找到對應的屬性值,把屬性值賦值到節點上,同時為了在數據更新後訂閲者知道更新自己,也要在INPUT節點裏新增Watcher實例

js attr.forEach(i=>{ if(i.nodeName==='v-model'){ const value=i.nodeValue.split('.').reduce( (total,current)=>total[current],vm.$data ) node.value=value new Watcher(vm,i.nodeValue,newValue=>{ node.value=newValue }) } })

修改屬性值,頁面也作出修改 7.gif

最後剩下用視圖改變數據,在v-model的節點上使用addEventListener增加input監聽事件就行了

js node.addEventListener('input',e=>{ const arr1=i.nodeValue.split('.') const arr2=arr1.slice(0,arr1.length - 1) const final=arr2.reduce( (total,current)=>total[current],vm.$data ) final[arr1[arr1.length - 1]]=e.target.value })

7.gif

本文正在參加「金石計劃 . 瓜分6萬現金大獎」