Vue雙向綁定實(shí)現(xiàn)原理與方法詳解
本文實(shí)例講述了Vue雙向綁定實(shí)現(xiàn)原理與方法。分享給大家供大家參考，具體如下：
昨天接到一個(gè)電話面試，上來第一個(gè)問題就是Vue雙向綁定的原理。當(dāng)時(shí)我并不知道如何監(jiān)聽數(shù)據(jù)層到視圖層的變化，于是沒答上來，掛電話后，我趕忙查了下資料，主要思路有如下三種。
1.發(fā)布者-訂閱者模式（backbone.js）思路：使用自定義的data屬性在HTML代碼中指明綁定。所有綁定起來的JavaScript對(duì)象以及DOM元素都將“訂閱”一個(gè)發(fā)布者對(duì)象。任何時(shí)候如果JavaScript對(duì)象或者一個(gè)HTML輸入字段被偵測(cè)到發(fā)生了變化，我們將代理事件到發(fā)布者-訂閱者模式，這會(huì)反過來將變化廣播并傳播到所有綁定的對(duì)象和元素。
2.臟值檢查（angular.js）思路：angular.js 是通過臟值檢測(cè)的方式比對(duì)數(shù)據(jù)是否有變更，來決定是否更新視圖，最簡(jiǎn)單的方式就是通過 setInterval() 定時(shí)輪詢檢測(cè)數(shù)據(jù)變動(dòng)，angular只有在指定的事件觸發(fā)時(shí)進(jìn)入臟值檢測(cè)，大致如下：
DOM事件，譬如用戶輸入文本，點(diǎn)擊按鈕等。( ng-click ) XHR響應(yīng)事件 ( $http ) 瀏覽器Location變更事件 ( $location ) Timer事件( $timeout , $interval ) 執(zhí)行 $digest() 或 $apply()3.數(shù)據(jù)劫持（Vue.js）思路： vue.js 則是采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個(gè)屬性的setter，getter，在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)。
Object.defineProperty()：方法會(huì)直接在一個(gè)對(duì)象上定義一個(gè)新屬性，或者修改一個(gè)對(duì)象的現(xiàn)有屬性， 并返回這個(gè)對(duì)象。
var obj = {}; Object.defineProperty(obj, ’hello’, { get: function() { console.log(’get val:’+ val); return val; }, set: function(newVal) { val = newVal; console.log(’set val:’+ val); } });obj.hello=’111’;//控制臺(tái)打印set val:111obj.hello; //控制臺(tái)打印get val:111
當(dāng)獲取hello屬性時(shí)，觸發(fā)get；設(shè)置hello值時(shí)，觸發(fā)set；這就是vue實(shí)現(xiàn)雙向綁定的核心
完整代碼如下
<!DOCTYPE html><html lang='en'><head><meta charset='UTF-8'><meta name='viewport' content='width=device-width, initial-scale=1.0'><meta http-equiv='X-UA-Compatible' content='ie=edge'><title>v-model</title></head><body><div id=’app’><h2>{{title}}</h2><input id=’i’ v-model=’text’ type='text'><h1>{{text}}</h1><button v-on:click=’clickMe’>click me</button></div><script>//Dom類 解析模板指令，將模板中的變量替換成數(shù)據(jù)，然后初始化渲染頁(yè)面視圖//并將每個(gè)指令對(duì)應(yīng)的節(jié)點(diǎn)綁定更新函數(shù)，添加監(jiān)聽數(shù)據(jù)的訂閱者，一旦數(shù)據(jù)有變動(dòng)，收到通知，更新視圖class Doms {constructor(node, vm) {if (node) {this.$frag = this.nodeToFragment(node, vm)return this.$frag}}nodeToFragment(node, vm) {//將dom轉(zhuǎn)換成fragmentvar frag = document.createDocumentFragment()var child;while (child = node.firstChild) {this.compileElement(child, vm)frag.appendChild(child)}return frag}compileElement(node, vm) {//獲取v-model屬性,給dom賦值var reg = /{{(.*)}}/ //匹配雙括號(hào)里面的任何字符if (node.nodeType === 1) {//element元素var attr = node.attributes;for (var i = 0; i < attr.length; i++) {if (attr[i].nodeName == ’v-model’) {var name = attr[i].nodeValue//獲取綁定的keynode.addEventListener(’input’, function (e) {vm[name] = e.target.value//觸發(fā)set方法})new Watcher(vm, node, name, ’value’)} else if (attr[i].nodeName.includes(’:’)) {var eventType = attr[i].nodeName.split(’:’)[1]//事件名var cb = vm.methods && vm.methods[attr[i].nodeValue]if (eventType && cb) {node.addEventListener(eventType, cb.bind(vm), false)}}}if (node.childNodes && node.childNodes.length) {//如果還有子節(jié)點(diǎn) 遞歸[...node.childNodes].forEach(n => this.compileElement(n, vm))}}if (node.nodeType === 3) {//textif (reg.test(node.nodeValue)) {var name = RegExp.$1name = name.trim()new Watcher(vm, node, name, ’nodeValue’)}}}}class Vue {//Vue類constructor(params) {this.data = params.data //獲取屬性this.methods = params.methods //獲取方法this.observe(params.data, this)//監(jiān)聽屬性var id = params.el;var dom = new Doms(document.getElementById(id), this)document.getElementById(id).appendChild(dom)params.mounted.call(this)}observe(obj, vm) {//讀取data內(nèi)屬性，并監(jiān)聽if (!obj || typeof obj !== ’object’) returnObject.keys(obj).forEach(key => this.defineReactive(vm, key, obj[key]))}defineReactive(obj, key, val) {//利用Object.defineProperty監(jiān)聽屬性改變var dep = new Dep()Object.defineProperty(obj, key, {get: function () {if (Dep.target) {//添加訂閱者watcher到主題對(duì)象Depdep.addSub(Dep.target)}return val},set: function (newVal) {if (newVal === val) returnval = newValconsole.log(val)//作為發(fā)布者發(fā)布通知dep.notify()}})}}class Dep {//收集訂閱者的容器類constructor() {this.subs = []}addSub(sub) {this.subs.push(sub)}notify() {this.subs.forEach(sub => sub.update())}}class Watcher {constructor(vm, node, name, type) {Dep.target = thisthis.name = namethis.node = nodethis.vm = vmthis.type = typethis.update()Dep.target = null}update() {this.get()this.node[this.type] = this.value//訂閱者執(zhí)行響應(yīng)操作}get() {this.value = this.vm[this.name]//觸發(fā)響應(yīng)屬性的get}}var vm = new Vue({el: ’app’,data: {text: ’lyl’,title: ’hello world’},methods: {clickMe() {this.title = ’hello world’}},mounted() {setTimeout(() => {this.title = ’你好’}, 1000);}})</script></body></html>
GitHub地址：https://github.com/ChrisLuckComes/Vue2WayBind
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章：
1. ASP 信息提示函數(shù)并作返回或者轉(zhuǎn)向2. .NET SkiaSharp 生成二維碼驗(yàn)證碼及指定區(qū)域截取方法實(shí)現(xiàn)3. jsp網(wǎng)頁(yè)實(shí)現(xiàn)貪吃蛇小游戲4. CentOS郵件服務(wù)器搭建系列—— POP / IMAP 服務(wù)器的構(gòu)建（ Dovecot ）5. Java中equals()知識(shí)點(diǎn)總結(jié)6. css代碼優(yōu)化的12個(gè)技巧7. ASP中if語句、select 、while循環(huán)的使用方法8. MyBatis JdbcType 與Oracle、MySql數(shù)據(jù)類型對(duì)應(yīng)關(guān)系說明9. 小技巧處理div內(nèi)容溢出10. 將properties文件的配置設(shè)置為整個(gè)Web應(yīng)用的全局變量實(shí)現(xiàn)方法
網(wǎng)公網(wǎng)安備