电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術(shù)文章
文章詳情頁

手動實(shí)現(xiàn)vue2.0的雙向數(shù)據(jù)綁定原理詳解

瀏覽:93日期:2022-10-06 11:15:50
一句話概括:數(shù)據(jù)劫持(Object.defineProperty)+發(fā)布訂閱模式

雙向數(shù)據(jù)綁定有三大核心模塊(dep 、observer、watcher),它們之間是怎么連接的,下面來一一介紹。

為了大家更好的理解雙向數(shù)據(jù)綁定原理以及它們之間是如何實(shí)現(xiàn)關(guān)聯(lián)的,先帶領(lǐng)大家復(fù)習(xí)一下發(fā)布訂閱模式。

一.首先了解什么是發(fā)布訂閱模式

直接上代碼:

一個簡單的發(fā)布訂閱模式,幫助大家更好的理解雙向數(shù)據(jù)綁定原理

//發(fā)布訂閱模式function Dep() { this.subs = []//收集依賴(也就是手機(jī)watcher實(shí)例),}Dep.prototype.addSub = function (sub) { //添加訂閱者 this.subs.push(sub); //實(shí)際上添加的是watcher這個實(shí)例}Dep.prototype.notify = function (sub) { //發(fā)布,這個方法的作用是遍歷數(shù)組,讓每個訂閱者的update方法去執(zhí)行 this.subs.forEach((sub) => sub.update())}function Watcher(fn) { this.fn = fn;}Watcher.prototype.update = function () { //添加一個update屬性讓每一個實(shí)例都可以繼承這個方法 this.fn();}let watcher = new Watcher(function () { alert(1)});//訂閱let dep = new Dep();dep.addSub(watcher);//添加依賴,添加訂閱者dep.notify();//發(fā)布,讓每個訂閱者的update方法執(zhí)行二.new Vue()的時候做了什么?

只是針對雙向數(shù)據(jù)綁定做說明

<template> <div id='app'> <div>obj.text的值:{{obj.text}}</div> <p>word的值:{{word}}</p> <input type='text' v-model='word'> </div></template><script> new Vue({ el: '#app', data: { obj: {text: '向上', }, word: '學(xué)習(xí)' }, methods:{ // ... } })</script>

Vue構(gòu)造函數(shù)都干什么了?

function Vue(options = {}) { this.$options = options;//接收參數(shù) var data = this._data = this.$options.data; observer(data);//對data中的數(shù)據(jù)進(jìn)型循環(huán)遞歸綁定 for (let key in data) { let val = data[key]; observer(val); Object.defineProperty(this, key, { enumerable: true, get() {return this._data[key]; }, set(newVal) {this._data[key] = newVal; } }) } new Compile(options.el, this)};

在new Vue({…})構(gòu)造函數(shù)時,首先獲取參數(shù)options,然后把參數(shù)中的data數(shù)據(jù)賦值給當(dāng)前實(shí)例的_data屬性上(this._data = this.$options.data),重點(diǎn)來了,那下面的遍歷是為什么呢?首先我們在操作數(shù)據(jù)的時候是this.word獲取,而不是this._data.word,所以是做了一個映射,在獲取數(shù)據(jù)的時候this.word,其實(shí)是獲取的this._data.word的值,大家可以在自己項(xiàng)目中輸出this查看一下

手動實(shí)現(xiàn)vue2.0的雙向數(shù)據(jù)綁定原理詳解

1.接下來看看observer方法干了什么

function observer(data) { if (typeof data !== 'object') return; return new Observer(data);//返回一個實(shí)例}function Observer(data) { let dep = new Dep();//創(chuàng)建一個dep實(shí)例 for (let key in data) {//對數(shù)據(jù)進(jìn)行循環(huán)遞歸綁定 let val = data[key]; observer(val); Object.defineProperty(data, key, { enumerable: true, get() {Dep.target && dep.depend(Dep.target);//Dep.target就是Watcher的一個實(shí)例return val; }, set(newVal) {if (newVal === val) { return;}val = newVal;observer(newVal);dep.notify() //讓所有方法執(zhí)行 } }) }}

Observer構(gòu)造函數(shù),首先let dep=new Dep(),作為之后的觸發(fā)數(shù)據(jù)劫持的get方法和set方法時,去收集依賴和發(fā)布時調(diào)用,主要的操作就是通過Object.defineProperty對data數(shù)據(jù)進(jìn)行循環(huán)遞歸綁定,使用getter/setter修改其默認(rèn)讀寫,用于收集依賴和發(fā)布更新。

2.再來看看Compile具體干了那些事情

function Compile(el, vm) { vm.$el = document.querySelector(el); let fragment = document.createDocumentFragment(); //創(chuàng)建文檔碎片,是object類型 while (child = vm.$el.firstChild) { fragment.appendChild(child); };//用while循環(huán)把所有節(jié)點(diǎn)都添加到文檔碎片中,之后都是對文檔碎片的操作,最后再把文檔碎片添加到頁面中,這里有一個很重要的特性是,如果使用appendChid方法將原dom樹中的節(jié)點(diǎn)添加到fragment中時,會刪除原來的節(jié)點(diǎn)。 replace(fragment); function replace(fragment) { Array.from(fragment.childNodes).forEach((node) => {//循環(huán)所有的節(jié)點(diǎn) let text = node.textContent; let reg = /{{(.*)}}/; if (node.nodeType === 3 && reg.test(text)) {//判斷當(dāng)前節(jié)點(diǎn)是不是文本節(jié)點(diǎn)且符不符合{{obj.text}}的輸出方式,如果滿足條件說明它是雙向的數(shù)據(jù)綁定,要添加訂閱者(watcher)console.log(RegExp.$1); //obj.textlet arr = RegExp.$1.split('.'); //轉(zhuǎn)換成數(shù)組的方式[obj,text],方便取值let val = vm;arr.forEach((key) => { //實(shí)現(xiàn)取值this.obj.text val = val[key];});new Watcher(vm, RegExp.$1, function (newVal) { node.textContent = text.replace(/{{(.*)}}/, newVal)});node.textContent = text.replace(/{{(.*)}}/, val); //對節(jié)點(diǎn)內(nèi)容進(jìn)行初始化的賦值 } if (node.nodeType === 1) { //說明是元素節(jié)點(diǎn)let nodeAttrs = node.attributes;Array.from(nodeAttrs).forEach((item) => { if (item.name.indexOf('v-') >= 0) {//判斷是不是v-model這種指令 node.value = vm[item.value]//對節(jié)點(diǎn)賦值操作 } //添加訂閱者 new Watcher(vm, item.value, function (newVal) { node.value = vm[item.value] }); node.addEventListener('input', function (e) { let newVal = e.target.value; vm[item.value] = newVal; })}) } if (node.childNodes) { //這個節(jié)點(diǎn)里還有子元素,再遞歸replace(node); } }) } //這是頁面中的文檔已經(jīng)沒有了,所以還要把文檔碎片放到頁面中 vm.$el.appendChild(fragment);}

Compile(編譯方法)

首先解釋一下DocuemntFragment(文檔碎片)它是一個dom節(jié)點(diǎn)收容器,當(dāng)你創(chuàng)造了多個節(jié)點(diǎn),當(dāng)每個節(jié)點(diǎn)都插入到文檔當(dāng)中都會引發(fā)一次回流,也就是說瀏覽器要回流多次,十分耗性能,而使用文檔碎片就是把多個節(jié)點(diǎn)都先放入到一個容器中,最后再把整個容器直接插入就可以了,瀏覽器只回流了1次。

Compile方法首先遍歷文檔碎片的所有節(jié)點(diǎn),1.判斷是否是文本節(jié)點(diǎn)且符不符合{{obj.text}}的雙大括號的輸出方式,如果滿足條件說明它是雙向的數(shù)據(jù)綁定,要添加訂閱者(watcher),new Watcher(vm,動態(tài)綁定的變量,回調(diào)函數(shù)fn) 2.判斷是否是元素節(jié)點(diǎn)且屬性中是否含有v-model這種指令,如果滿足條件說明它是雙向的數(shù)據(jù)綁定,要添加訂閱者(watcher),new Watcher(vm,動態(tài)綁定的變量,回調(diào)函數(shù)fn) ,直至遍歷完成。

最后別忘了把文檔碎片放到頁面中

3.Dep構(gòu)造函數(shù)(怎么收集依賴的)

var uid=0;//發(fā)布訂閱function Dep() { this.id=uid++; this.subs = [];}Dep.prototype.addSub = function (sub) { //訂閱 this.subs.push(sub); //實(shí)際上添加的是watcher這個實(shí)例}Dep.prototype.depend = function () { // 訂閱管理器 if(Dep.target){//只有Dep.target存在時采取添加 Dep.target.addDep(this); }}Dep.prototype.notify = function (sub) { //發(fā)布,遍歷數(shù)組讓每個訂閱者的update方法去執(zhí)行 this.subs.forEach((sub) => sub.update())}

Dep構(gòu)造函數(shù)內(nèi)部有一個id和一個subs,id=uid++ ,id用于作為dep對象的唯一標(biāo)識,subs就是保存watcher的數(shù)組。depend方法就是一個訂閱的管理器,會調(diào)用當(dāng)前watcher的addDep方法添加訂閱者,當(dāng)觸發(fā)數(shù)據(jù)劫持(Object.defineProperty)的get方法時會調(diào)用Dep.target && dep.depend(Dep.target)添加訂閱者,當(dāng)數(shù)據(jù)改變時觸發(fā)數(shù)據(jù)劫持(Object.defineProperty)的set方法時會調(diào)用dep.notify方法更新操作。

4.Watcher構(gòu)造函數(shù)干了什么

function Watcher(vm, exp, fn) { this.fn = fn; this.vm = vm; this.exp = exp // this.newDeps = []; this.depIds = new Set(); this.newDepIds = new Set(); Dep.target = this; //this是指向當(dāng)前(Watcher)的一個實(shí)例 let val = vm; let arr = exp.split('.'); arr.forEach((k) => { //取值this.obj.text val = val[k] //取值this.obj.text,就會觸發(fā)數(shù)據(jù)劫持的get方法,把當(dāng)前的訂閱者(watcher實(shí)例)添加到依賴中 }); Dep.target = null;}Watcher.prototype.addDep = function (dep) { var id=dep.id; if(!this.newDepIds.has(id)){ this.newDepIds.add(id); this.newDeps.push(dep); if(!this.depIds.has(id)){ dep.addSub(this); } } }Watcher.prototype.update = function () { //這就是每個綁定的方法都添加一個update屬性 let val = this.vm; let arr = this.exp.split('.'); arr.forEach((k) => { val = val[k] //取值this.obj.text,傳給fn更新操作 }); this.fn(val); //傳一個新值}

Watcher構(gòu)造函數(shù)干了什么

1 接收參數(shù),定義了幾個私有屬性( this.newDep ,this.depIds,this.newDepIds)

2. Dep.target = this,通過參數(shù)進(jìn)行data取值操作,這就會觸發(fā)Object.defineProperty的get方法,它會通過訂閱者管理器(dep.depend())添加訂閱者,添加完之后再將Dep.target=null置為空;

3.原型上的addDep是通過id這個唯一標(biāo)識,和幾個私有屬性的判斷防止訂閱者被多次重復(fù)添加

4.update方法就是當(dāng)數(shù)據(jù)更新時,dep.notify()執(zhí)行,觸發(fā)訂閱者的update這個方法, 執(zhí)行發(fā)布更新操作。

總結(jié)一下

vue2.0中雙向數(shù)據(jù)綁定,簡單來說就是Observer、Watcher、Dep三大部分;

1.首先用Object.defineProperty()循環(huán)遞歸實(shí)現(xiàn)數(shù)據(jù)劫持,為每個屬性分配一個訂閱者集合的管理數(shù)組dep;

2.在編譯的時候,創(chuàng)建文檔碎片,把所有節(jié)點(diǎn)添加到文檔碎片中,遍歷文檔碎片的所有結(jié)點(diǎn),如果是{{}},v-model這種,new Watcher()實(shí)例并向dep的subs數(shù)組中添加該實(shí)例

3.最后修改值就會觸發(fā)Object.defineProperty()的set方法,在set方法中會執(zhí)行dep.notify(),然后循環(huán)調(diào)用所有訂閱者的update方法更新視圖。

到此這篇關(guān)于手動實(shí)現(xiàn)vue2.0的雙向數(shù)據(jù)綁定原理的文章就介紹到這了,更多相關(guān)vue2.0雙向數(shù)據(jù)綁定內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)!

標(biāo)簽: Vue
相關(guān)文章:
主站蜘蛛池模板: 权威废金属|废塑料|废纸|废铜|废钢价格|再生资源回收行情报价中心-中废网 | 跨境物流_美国卡派_中大件运输_尾程派送_海外仓一件代发 - 广州环至美供应链平台 | 铁盒_铁罐_马口铁盒_马口铁罐_铁盒生产厂家-广州博新制罐 | 万濠投影仪_瑞士TRIMOS高度仪_尼康投影仪V12BDC|量子仪器 | 防火阀、排烟防火阀、电动防火阀产品生产销售商-德州凯亿空调设备有限公司 | 蜘蛛车-高空作业平台-升降机-高空作业车租赁-臂式伸缩臂叉装车-登高车出租厂家 - 普雷斯特机械设备(北京)有限公司 | 锤式粉碎机,医药粉碎机,锥式粉碎机-无锡市迪麦森机械制造有限公司 | 中医治疗皮肤病_潍坊银康医院「山东」重症皮肤病救治平台 | 高通量组织研磨仪-多样品组织研磨仪-全自动组织研磨仪-研磨者科技(广州)有限公司 | 太空舱_民宿太空舱厂家_移动房屋太空舱价格-豪品建筑 | 热工多功能信号校验仪-热电阻热电偶校验仿真仪-金湖虹润仪表 | 成都顶呱呱信息技术有限公司-贷款_个人贷款_银行贷款在线申请 - 成都贷款公司 | 护栏打桩机-打桩机厂家-恒新重工| 超声波清洗机-超声波清洗设备定制生产厂家 - 深圳市冠博科技实业有限公司 | 西装定制/做厂家/公司_西装订做/制价格/费用-北京圣达信西装 | 耐火浇注料价格-高强高铝-刚玉碳化硅耐磨浇注料厂家【直销】 | 飞扬动力官网-广告公司管理软件,广告公司管理系统,喷绘写真条幅制作管理软件,广告公司ERP系统 | 旋转/数显粘度计-运动粘度测定仪-上海平轩科学仪器 | 盘煤仪,盘料仪,盘点仪,堆料测量仪,便携式激光盘煤仪-中科航宇(北京)自动化工程技术有限公司 | 艺术涂料_进口艺术涂料_艺术涂料加盟_艺术涂料十大品牌 -英国蒙太奇艺术涂料 | 合肥宠物店装修_合肥宠物美容院装修_合肥宠物医院设计装修公司-安徽盛世和居装饰 | 沈阳网站建设_沈阳网站制作_沈阳网页设计-做网站就找示剑新零售 沈阳缠绕膜价格_沈阳拉伸膜厂家_沈阳缠绕膜厂家直销 | 拉伸膜,PE缠绕膜,打包带,封箱胶带,包装膜厂家-东莞宏展包装 | 流程管理|流程管理软件|企业流程管理|微宏科技-AlphaFlow_流程管理系统软件服务商 | 重庆网站建设,重庆网站设计,重庆网站制作,重庆seo,重庆做网站,重庆seo,重庆公众号运营,重庆小程序开发 | 济南品牌包装设计公司_济南VI标志设计公司_山东锐尚文化传播 | 并网柜,汇流箱,电控设备,中高低压开关柜,电气电力成套设备,PLC控制设备订制厂家,江苏昌伟业新能源科技有限公司 | 电表箱-浙江迈峰电力设备有限公司-电表箱专业制造商 | 沈阳缠绕膜价格_沈阳拉伸膜厂家_沈阳缠绕膜厂家直销 | 净化车间装修_合肥厂房无尘室设计_合肥工厂洁净工程装修公司-安徽盛世和居装饰 | 引领中高档酒店加盟_含舍·美素酒店品牌官网| 环讯传媒,永康网络公司,永康网站建设,永康小程序开发制作,永康网站制作,武义网页设计,金华地区网站SEO优化推广 - 永康市环讯电子商务有限公司 | 液压油缸生产厂家-山东液压站-济南捷兴液压机电设备有限公司 | 高尔夫球杆_高尔夫果岭_高尔夫用品-深圳市新高品体育用品有限公司 | 陕西鹏展科技有限公司| 磁力反应釜,高压釜,实验室反应釜,高温高压反应釜-威海自控反应釜有限公司 | 不锈钢酒柜|恒温酒柜|酒柜定制|酒窖定制-上海啸瑞实业有限公司 | 板框压滤机-隔膜压滤机配件生产厂家-陕西华星佳洋装备制造有限公司 | 小型气象站_便携式自动气象站_校园气象站-竞道气象设备网 | 数显水浴恒温振荡器-分液漏斗萃取振荡器-常州市凯航仪器有限公司 | 天津市能谱科技有限公司-专业的红外光谱仪_红外测油仪_紫外测油仪_红外制样附件_傅里叶红外光谱技术生产服务厂商 |