Vue中如何實(shí)現(xiàn)數(shù)據(jù)雙向綁定？下面本篇文章給大家介紹一下Vue.js數(shù)據(jù)雙向綁定的實(shí)現(xiàn)方法，希望對(duì)大家有所幫助！

前端（vue）入門到精通課程，老師在線輔導(dǎo)：聯(lián)系老師
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調(diào)試工具：點(diǎn)擊使用

在我們使用vue的時(shí)候，當(dāng)數(shù)據(jù)發(fā)生了改變，界面也會(huì)跟著更新，但這并不是理所當(dāng)然的，我們修改數(shù)據(jù)的時(shí)候vue是如何監(jiān)聽數(shù)據(jù)的改變以及當(dāng)數(shù)據(jù)發(fā)生改變的時(shí)候vue如何讓界面刷新的？

當(dāng)我們修改數(shù)據(jù)的時(shí)候vue是通過es5中的Object.defineProperty方法來監(jiān)聽數(shù)據(jù)的改變的，當(dāng)數(shù)據(jù)發(fā)生了改變通過發(fā)布訂閱模式統(tǒng)計(jì)訂閱者界面發(fā)生了刷新，這是一種設(shè)計(jì)模式?！緦W(xué)習(xí)視頻分享：vue視頻教程、web前端視頻】

下圖，從new Vue開始創(chuàng)建Vue實(shí)例，會(huì)傳入el和data，data會(huì)被傳入一個(gè)觀察者對(duì)象，利用Object.definproperty將data里數(shù)據(jù)轉(zhuǎn)化成getter/setter進(jìn)行數(shù)據(jù)劫持，data里的每個(gè)屬性都會(huì)創(chuàng)建一個(gè)Dep實(shí)例用來保存watcher實(shí)例

而el則傳入compile，在compile里進(jìn)行指令的解析，當(dāng)解析到el中使用到data里的數(shù)據(jù)會(huì)觸發(fā)我們的getter，從而將我們的watcher添加到依賴當(dāng)中。當(dāng)數(shù)據(jù)發(fā)生改變的時(shí)候會(huì)觸發(fā)我們的setter發(fā)出依賴通知，通知watcher，watcher接受到通知后去向view發(fā)出通知，讓view去更新

數(shù)據(jù)劫持

html部分創(chuàng)建一個(gè)id為app的div標(biāo)簽，里面有span和input標(biāo)簽，span標(biāo)簽使用了插值表達(dá)式，input標(biāo)簽使用了v-model

<div class="container" id="app">     <span>內(nèi)容:{{content}}</span>     <input type="text" v-model="content"> </div>

js部分引入了一個(gè)vue.js文件，實(shí)現(xiàn)數(shù)據(jù)雙向綁定的代碼就寫在這里面，然后創(chuàng)建Vue實(shí)例vm，把數(shù)據(jù)掛載到div標(biāo)簽上

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

new了一個(gè)Vue實(shí)例很明顯需要用到構(gòu)造函數(shù)，在vue的源碼里定義類是使用了function來定義的，這里我使用ES6的class來創(chuàng)建這個(gè)Vue實(shí)例

然后設(shè)置constructor，形參設(shè)為obj_instance，作為new一個(gè)Vue實(shí)例的時(shí)候傳入的對(duì)象，并把傳進(jìn)來的對(duì)象里的data賦值給實(shí)例里的$data屬性

在javascript里對(duì)象的屬性發(fā)生了變化，需要告訴我們，我們就可以把更改后的屬性更新到dom節(jié)點(diǎn)里，因此初始化實(shí)例的時(shí)候定義一個(gè)監(jiān)聽函數(shù)作為調(diào)用，調(diào)用的時(shí)候傳入需要監(jiān)聽的數(shù)據(jù)

class Vue{//創(chuàng)建Vue實(shí)例   constructor(obj_instance){     this.$data=obj_instance.data     Observer(this.$data)   } } function Observer(data_instance){//監(jiān)聽函數(shù)    }

打印一下這個(gè)實(shí)例vm

實(shí)例已經(jīng)創(chuàng)建出來了但是還需要為$data里的每一個(gè)屬性進(jìn)行監(jiān)聽，要實(shí)現(xiàn)數(shù)據(jù)監(jiān)聽就用到了Object.defineProperty，Object.defineProperty可以修改對(duì)象的現(xiàn)有屬性，語法格式為Object.defineProperty(obj, prop, descriptor)

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

監(jiān)聽對(duì)象里的每一個(gè)屬性，我們使用Object.keys和foreach遍歷對(duì)象里的每一個(gè)屬性并且對(duì)每一個(gè)屬性使用Object.defineProperty進(jìn)行數(shù)據(jù)監(jiān)聽

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

在Object.defineProperty前需要將屬性對(duì)應(yīng)的值存起來然后在get函數(shù)里面返回出來，不然到了get函數(shù)以后屬性的值已經(jīng)沒了，返回給屬性的值就變成了undefined

let value=data_instance[key] Object.defineProperty(data_instance,key,{   enumerable:true,   configurable:true,   get(){     console.log(key,value);     return value   },   set(){} })

點(diǎn)擊一下$data里的屬性名就會(huì)觸發(fā)get函數(shù)

然后設(shè)置set函數(shù)，為set設(shè)置形參，這個(gè)形參表示新傳進(jìn)來的屬性值，然后將這個(gè)新的屬性值賦值給變量value，不需要return返回什么，只做修改，返回是在訪問get的時(shí)候返回的，修改之后get也會(huì)訪問最新的value變量值

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

但是當(dāng)前只為$data的第一層屬性設(shè)置了get和set，如果還有更深的一層如

obj:{     a:'a',     b:'b' }

這種的并沒有設(shè)置get和set，我們需要一層一層的往屬性里面進(jìn)行數(shù)據(jù)劫持，因此使用遞歸再次監(jiān)聽自己，并在遍歷之前進(jìn)行條件判斷，沒有子屬性了或者沒有檢測(cè)到對(duì)象就終止遞歸

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       }     })   }) }

還有一個(gè)細(xì)節(jié)，如果我們將$data的content屬性從字符串改寫成一個(gè)對(duì)象，這個(gè)新的對(duì)象并沒有g(shù)et和set

因?yàn)槲覀冊(cè)谛薷牡臅r(shí)候根本沒有設(shè)置get和set，因此在set里要調(diào)用監(jiān)聽函數(shù)

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

模板解析

劫持?jǐn)?shù)據(jù)后就要把Vue實(shí)例里的數(shù)據(jù)應(yīng)用帶頁面上，得要加一個(gè)臨時(shí)內(nèi)存區(qū)域，將所有數(shù)據(jù)都更新后再渲染頁面以此減少dom操作

創(chuàng)建一個(gè)解析函數(shù)，設(shè)置2個(gè)參數(shù)，一個(gè)是Vue實(shí)例里掛載的元素，另一個(gè)是Vue實(shí)例，在函數(shù)里獲取獲取元素保存在實(shí)例了的$el里，獲取元素后放入臨時(shí)內(nèi)存里，需要用到[createDocumentFragment]創(chuàng)建一個(gè)新的空白的文檔片段

然后把$el的子節(jié)點(diǎn)一個(gè)一個(gè)加到fragment變量里，頁面已經(jīng)沒有內(nèi)容了，內(nèi)容都被臨時(shí)存在fragment里了

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); }

現(xiàn)在直接把需要修改的內(nèi)容應(yīng)用到文檔碎片里面，應(yīng)用后重新渲染，只需修改了fragment的childNodes子節(jié)點(diǎn)的文本節(jié)點(diǎn)，文本節(jié)點(diǎn)的類型是3，可以創(chuàng)建一個(gè)函數(shù)并調(diào)用來修改fragment里的內(nèi)容

節(jié)點(diǎn)里面可能還會(huì)有節(jié)點(diǎn)，因此判定節(jié)點(diǎn)類型是否為3，不是就遞歸調(diào)用這個(gè)解析函數(shù)

節(jié)點(diǎn)類型為3就進(jìn)行修改操作，但也不行把整個(gè)節(jié)點(diǎn)的文本都修改，只需修改插值表達(dá)式的內(nèi)容，因此要使用正則表達(dá)式匹配，將匹配的結(jié)果保存到變量里，匹配的結(jié)果是一個(gè)數(shù)組，而索引為1的元素才是我們需要提取出來的元素，這個(gè)元素就是去除了{(lán){}}和空格得到的字符串，然后就可以直接用Vue實(shí)例來訪問對(duì)應(yīng)屬性的值，修改完后return出去結(jié)束遞歸

function Compile(ele,vm){   vm.$el=document.querySelector(ele) //獲取元素保存在實(shí)例了的$el里   const fragment=document.createDocumentFragment() //創(chuàng)建文檔碎片   let child;   while (child=vm.$el.firstChild){//循環(huán)將子節(jié)點(diǎn)添加到文檔碎片里     fragment.append(child)   }      fragment_compile(fragment)   function fragment_compile(node){ //修改文本節(jié)點(diǎn)內(nèi)容     const pattern = /{{s*(S*)s*}}/ //檢索字符串中正則表達(dá)式的匹配，用于匹配插值表達(dá)式     if(node.nodeType===3){       const result = pattern.exec(node.nodeValue)       if(result){         console.log('result[1]')         const value=result[1].split('.').reduce(//split將對(duì)象里的屬性分布在數(shù)組里，鏈?zhǔn)降剡M(jìn)行排列；reduce進(jìn)行累加，層層遞進(jìn)獲取$data的值           (total,current)=>total[current],vm.$data         )         node.nodeValue=node.nodeValue.replace(pattern,value) //replace函數(shù)將插值表達(dá)式替換成$data里的屬性的值       }       return      }     node.childNodes.forEach(child=>fragment_compile(child))   }   vm.$el.appendChild(fragment) //將文檔碎片應(yīng)用到對(duì)應(yīng)的dom元素里面 }

頁面的內(nèi)容又出來了，插值表達(dá)式替換成了vm實(shí)例里的數(shù)據(jù)

訂閱發(fā)布者模式

雖然進(jìn)行了數(shù)據(jù)劫持，和將數(shù)據(jù)應(yīng)用到頁面上，但是數(shù)據(jù)發(fā)生變動(dòng)還不能及時(shí)更新，還需要實(shí)現(xiàn)訂閱發(fā)布者模式

首先創(chuàng)建一個(gè)類用來收集和通知訂閱者，生成實(shí)例的時(shí)候需要有一個(gè)數(shù)組存放訂閱者的信息，一個(gè)將訂閱者添加到這個(gè)數(shù)組里的方法和一個(gè)通知訂閱者的方法，調(diào)用這個(gè)方法就回去遍歷訂閱者的數(shù)組，讓訂閱者調(diào)用自身的update方法進(jìn)行更新

class Dependency{   constructor(){     this.subscribers=[] //存放訂閱者的信息   }   addSub(sub){     this.subscribers.push(sub) //將訂閱者添加到這個(gè)數(shù)組里   }   notify(){     this.subscribers.forEach(sub=>sub.update()) //遍歷訂閱者的數(shù)組，調(diào)用自身的update函數(shù)進(jìn)行更新   } }

設(shè)置訂閱者類，需要用到Vue實(shí)例上的屬性，需要Vue實(shí)例和Vue實(shí)例對(duì)應(yīng)的屬性和一個(gè)回調(diào)函數(shù)作為參數(shù)，將參數(shù)都賦值給實(shí)例

然后就可以創(chuàng)建訂閱者的update函數(shù)，在函數(shù)里調(diào)用傳進(jìn)來的回調(diào)函數(shù)

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

替換文檔碎片內(nèi)容的時(shí)候需要告訴訂閱者如何更新，所以訂閱者實(shí)例在模板解析把節(jié)點(diǎn)值替換內(nèi)容的時(shí)候創(chuàng)建，傳入vm實(shí)例，exec匹配成功后的索引值1和回調(diào)函數(shù)，將替換文本的執(zhí)行語句復(fù)制到回調(diào)函數(shù)里，通知訂閱者更新的時(shí)候就調(diào)用這個(gè)回調(diào)函數(shù)

回調(diào)函數(shù)里的nodeValue要提前保存，不然替換的內(nèi)容就不是插值表達(dá)式而是替換過的內(nèi)容

然后就要想辦法將訂閱者存儲(chǔ)到Dependency實(shí)例的數(shù)組里，我們可以在構(gòu)造Watcher實(shí)例的時(shí)候保存實(shí)例到訂閱者數(shù)組里

Dependency.temp=this //設(shè)置一個(gè)臨時(shí)屬性temp

將新的訂閱者添加到訂閱者數(shù)組里且還要將所有的訂閱者都進(jìn)行同樣的操作，那么就可以在觸發(fā)get的時(shí)候?qū)⒂嗛喺咛砑拥接嗛喺邤?shù)組里，為了正確觸發(fā)對(duì)應(yīng)的屬性get，需要用reduce方法對(duì)key進(jìn)行同樣的操作

可以看到控制臺(tái)打印出了Wathcer實(shí)例，每個(gè)實(shí)例都不同，都對(duì)應(yīng)不同的屬性值

Dependency類還沒創(chuàng)建實(shí)例，里面的訂閱者數(shù)組是不存在的，所以要先創(chuàng)建實(shí)例再將訂閱者添加到訂閱者數(shù)組里

修改數(shù)據(jù)的時(shí)候通知訂閱者來進(jìn)行更新，在set里調(diào)用dependency的通知方法，通知方法就會(huì)去遍數(shù)組，訂閱者執(zhí)行自己的update方法進(jìn)行數(shù)據(jù)更新

但是update調(diào)用回調(diào)函數(shù)缺少設(shè)定形參，依舊使用split和reduce方法獲取屬性值

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

在控制臺(tái)修改屬性值都修改成功了，頁面也自動(dòng)更新了

完成了文本的綁定就可以綁定輸入框了，在vue里通過v-model進(jìn)行綁定，因此要判斷哪個(gè)節(jié)點(diǎn)有v-model，元素節(jié)點(diǎn)的類型是1，可以使用nodeName來匹配input元素，直接在判斷文本節(jié)點(diǎn)下面進(jìn)行新的判斷

if(node.nodeType===1&&node.nodeName==='INPUT'){     const attr=Array.from(node.attributes)     console.log(attr); }

節(jié)點(diǎn)名字nodeName為v-model，nodeValue為name，就是數(shù)據(jù)里的屬性名

因此對(duì)這個(gè)數(shù)組進(jìn)行遍歷，匹配到了v-model根據(jù)nodeValue找到對(duì)應(yīng)的屬性值，把屬性值賦值到節(jié)點(diǎn)上，同時(shí)為了在數(shù)據(jù)更新后訂閱者知道更新自己，也要在INPUT節(jié)點(diǎn)里新增Watcher實(shí)例

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         })     } })

修改屬性值，頁面也作出修改

最后剩下用視圖改變數(shù)據(jù)，在v-model的節(jié)點(diǎn)上使用addEventListener增加input監(jiān)聽事件就行了

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 })

（學(xué)習(xí)視頻分享：web前端開發(fā)、編程基礎(chǔ)視頻）