双向绑定 当obj的值修改时_Vue3为什么选择Proxy做双向绑定?
Vue3为什么选择Proxy做双向绑定?
双向绑定其实已经是一个老掉牙的问题了,只要涉及到MVVM框架就不得不谈的知识点,但它毕竟是Vue的三要素之一.
Vue三要素:
响应式: 例如如何监听数据变化,其中的实现方法就是我们提到的双向绑定
模板引擎: 如何解析模板
渲染: Vue如何将监听到的数据变化和解析后的HTML进行渲染
可以实现双向绑定的方法有很多,KnockoutJS基于观察者模式的双向绑定,Ember基于数据模型的双向绑定,Angular基于脏检查的双向绑定,本篇文章我们重点讲面试中常见的基于数据劫持的双向绑定。
常见的基于数据劫持的双向绑定有两种实现,一个是目前Vue在用的Object.defineProperty
,另一个是ES2015中新增的Proxy
,而Vue的作者宣称将在Vue3.0版本后加入Proxy
从而代替Object.defineProperty
,通过本文你也可以知道为什么Vue未来会选择Proxy
。
严格来讲Proxy应该被称为『代理』而非『劫持』,不过由于作用有很多相似之处,我们在下文中就不再做区分,统一叫『劫持』。
我们可以通过下图清楚看到以上两种方法在双向绑定体系中的关系.
基于数据劫持的当然还有已经凉透的
Object.observe
方法,已被废弃。提前声明: 我们没有对传入的参数进行及时判断而规避错误,仅仅对核心方法进行了实现.
基于数据劫持实现的双向绑定的特点
1.1 什么是数据劫持
数据劫持比较好理解,通常我们利用Object.defineProperty
劫持对象的访问器,在属性值发生变化时我们可以获取变化,从而进行进一步操作。
// 这是将要被劫持的对象const data = { name: '',};
function say(name) { if (name === '古天乐') { console.log('给大家推荐一款超好玩的游戏'); } else if (name === '渣渣辉') { console.log('戏我演过很多,可游戏我只玩贪玩懒月'); } else { console.log('来做我的兄弟'); }}
// 遍历对象,对其属性值进行劫持Object.keys(data).forEach(function(key) { Object.defineProperty(data, key, { enumerable: true, configurable: true, get: function() { console.log('get'); }, set: function(newVal) { // 当属性值发生变化时我们可以进行额外操作 console.log(`大家好,我系${newVal}`); say(newVal); }, });});
data.name = '渣渣辉';//大家好,我系渣渣辉//戏我演过很多,可游戏我只玩贪玩懒月
1.2 数据劫持的优势
目前业界分为两个大的流派,一个是以React为首的单向数据绑定,另一个是以Angular、Vue为主的双向数据绑定。
其实三大框架都是既可以双向绑定也可以单向绑定,比如React可以手动绑定onChange和value实现双向绑定,也可以调用一些双向绑定库,Vue也加入了props这种单向流的api,不过都并非主流卖点。
单向或者双向的优劣不在我们的讨论范围,我们需要讨论一下对比其他双向绑定的实现方法,数据劫持的优势所在。
无需显示调用: 例如Vue运用数据劫持+发布订阅,直接可以通知变化并驱动视图,上面的例子也是比较简单的实现
data.name = '渣渣辉'
后直接触发变更,而比如Angular的脏检测则需要显示调用markForCheck
(可以用zone.js避免显示调用,不展开),react需要显示调用setState
。可精确得知变化数据:还是上面的小例子,我们劫持了属性的setter,当属性值改变,我们可以精确获知变化的内容
newVal
,因此在这部分不需要额外的diff操作,否则我们只知道数据发生了变化而不知道具体哪些数据变化了,这个时候需要大量diff来找出变化值,这是额外性能损耗。
1.3 基于数据劫持双向绑定的实现思路
数据劫持是双向绑定各种方案中比较流行的一种,最著名的实现就是Vue。
基于数据劫持的双向绑定离不开Proxy
与Object.defineProperty
等方法对对象/对象属性的"劫持",我们要实现一个完整的双向绑定需要以下几个要点。
利用
Proxy
或Object.defineProperty
生成的Observer针对对象/对象的属性进行"劫持",在属性发生变化后通知订阅者解析器Compile解析模板中的
Directive
(指令),收集指令所依赖的方法和数据,等待数据变化然后进行渲染Watcher属于Observer和Compile桥梁,它将接收到的Observer产生的数据变化,并根据Compile提供的指令进行视图渲染,使得数据变化促使视图变化
我们看到,虽然Vue运用了数据劫持,但是依然离不开发布订阅的模式,之所以在系列2做了Event Bus的实现,就是因为我们不管在学习一些框架的原理还是一些流行库(例如Redux、Vuex),基本上都离不开发布订阅模式,而Event模块则是此模式的经典实现,所以如果不熟悉发布订阅模式,建议读一下系列2的文章。
2.基于Object.defineProperty双向绑定的特点
关于Object.defineProperty
的文章在网络上已经汗牛充栋,我们不想花过多时间在Object.defineProperty
上面,本节我们主要讲解Object.defineProperty
的特点,方便接下来与Proxy
进行对比。
对
Object.defineProperty
还不了解的请阅读文档
两年前就有人写过基于Object.defineProperty
实现的文章,想深入理解Object.defineProperty
实现的推荐阅读,本文也做了相关参考。
上面我们推荐的文章为比较完整的实现(400行代码),我们在本节只提供一个极简版(20行)和一个简化版(150行)的实现,读者可以循序渐进地阅读。
2.1 极简版的双向绑定
我们都知道,Object.defineProperty
的作用就是劫持一个对象的属性,通常我们对属性的getter
和setter
方法进行劫持,在对象的属性发生变化时进行特定的操作。
我们就对对象obj
的text
属性进行劫持,在获取此属性的值时打印'get val'
,在更改属性值的时候对DOM进行操作,这就是一个极简的双向绑定。
const obj = {};Object.defineProperty(obj, 'text', { get: function() { console.log('get val'); }, set: function(newVal) { console.log('set val:' + newVal); document.getElementById('input').value = newVal; document.getElementById('span').innerHTML = newVal; }});
const input = document.getElementById('input');input.addEventListener('keyup', function(e){ obj.text = e.target.value;})
2.2 升级改造
我们很快会发现,这个所谓的双向绑定貌似并没有什么乱用。。。
原因如下:
我们只监听了一个属性,一个对象不可能只有一个属性,我们需要对对象每个属性进行监听。
违反开放封闭原则,我们如果了解开放封闭原则的话,上述代码是明显违反此原则,我们每次修改都需要进入方法内部,这是需要坚决杜绝的。
代码耦合严重,我们的数据、方法和DOM都是耦合在一起的,就是传说中的面条代码。
那么如何解决上述问题?
Vue的操作就是加入了发布订阅模式,结合Object.defineProperty
的劫持能力,实现了可用性很高的双向绑定。
首先,我们以发布订阅的角度看我们第一部分写的那一坨代码,会发现它的监听、发布和订阅都是写在一起的,我们首先要做的就是解耦。
我们先实现一个订阅发布中心,即消息管理员(Dep),它负责储存订阅者和消息的分发,不管是订阅者还是发布者都需要依赖于它。
let uid = 0; // 用于储存订阅者并发布消息 class Dep { constructor() { // 设置id,用于区分新Watcher和只改变属性值后新产生的Watcher this.id = uid++; // 储存订阅者的数组 this.subs = []; } // 触发target上的Watcher中的addDep方法,参数为dep的实例本身 depend() { Dep.target.addDep(this); } // 添加订阅者 addSub(sub) { this.subs.push(sub); } notify() { // 通知所有的订阅者(Watcher),触发订阅者的相应逻辑处理 this.subs.forEach(sub => sub.update()); } } // 为Dep类设置一个静态属性,默认为null,工作时指向当前的Watcher Dep.target = null;
现在我们需要实现监听者(Observer),用于监听属性值的变化。
// 监听者,监听对象属性值的变化 class Observer { constructor(value) { this.value = value; this.walk(value); } // 遍历属性值并监听 walk(value) { Object.keys(value).forEach(key => this.convert(key, value[key])); } // 执行监听的具体方法 convert(key, val) { defineReactive(this.value, key, val); } }
function defineReactive(obj, key, val) { const dep = new Dep(); // 给当前属性的值添加监听 let chlidOb = observe(val); Object.defineProperty(obj, key, { enumerable: true, configurable: true, get: () => { // 如果Dep类存在target属性,将其添加到dep实例的subs数组中 // target指向一个Watcher实例,每个Watcher都是一个订阅者 // Watcher实例在实例化过程中,会读取data中的某个属性,从而触发当前get方法 if (Dep.target) { dep.depend(); } return val; }, set: newVal => { if (val === newVal) return; val = newVal; // 对新值进行监听 chlidOb = observe(newVal); // 通知所有订阅者,数值被改变了 dep.notify(); }, }); }
function observe(value) { // 当值不存在,或者不是复杂数据类型时,不再需要继续深入监听 if (!value || typeof value !== 'object') { return; } return new Observer(value); }
那么接下来就简单了,我们需要实现一个订阅者(Watcher)。
class Watcher { constructor(vm, expOrFn, cb) { this.depIds = {}; // hash储存订阅者的id,避免重复的订阅者 this.vm = vm; // 被订阅的数据一定来自于当前Vue实例 this.cb = cb; // 当数据更新时想要做的事情 this.expOrFn = expOrFn; // 被订阅的数据 this.val = this.get(); // 维护更新之前的数据 } // 对外暴露的接口,用于在订阅的数据被更新时,由订阅者管理员(Dep)调用 update() { this.run(); } addDep(dep) { // 如果在depIds的hash中没有当前的id,可以判断是新Watcher,因此可以添加到dep的数组中储存 // 此判断是避免同id的Watcher被多次储存 if (!this.depIds.hasOwnProperty(dep.id)) { dep.addSub(this); this.depIds[dep.id] = dep; } } run() { const val = this.get(); console.log(val); if (val !== this.val) { this.val = val; this.cb.call(this.vm, val); } } get() { // 当前订阅者(Watcher)读取被订阅数据的最新更新后的值时,通知订阅者管理员收集当前订阅者 Dep.target = this; const val = this.vm._data[this.expOrFn]; // 置空,用于下一个Watcher使用 Dep.target = null; return val; } }
那么我们最后完成Vue,将上述方法挂载在Vue上。
class Vue { constructor(options = {}) { // 简化了$options的处理 this.$options = options; // 简化了对data的处理 let data = (this._data = this.$options.data); // 将所有data最外层属性代理到Vue实例上 Object.keys(data).forEach(key => this._proxy(key)); // 监听数据 observe(data); } // 对外暴露调用订阅者的接口,内部主要在指令中使用订阅者 $watch(expOrFn, cb) { new Watcher(this, expOrFn, cb); } _proxy(key) { Object.defineProperty(this, key, { configurable: true, enumerable: true, get: () => this._data[key], set: val => { this._data[key] = val; }, }); } }
看下效果:
至此,一个简单的双向绑定算是被我们实现了。
2.3 Object.defineProperty的缺陷
其实我们升级版的双向绑定依然存在漏洞,比如我们将属性值改为数组。
let demo = new Vue({ data: { list: [1], },});
const list = document.getElementById('list');const btn = document.getElementById('btn');
btn.addEventListener('click', function() { demo.list.push(1);});
const render = arr => { const fragment = document.createDocumentFragment(); for (let i = 0; i const li = document.createElement('li'); li.textContent = arr[i]; fragment.appendChild(li); } list.appendChild(fragment);};
// 监听数组,每次数组变化则触发渲染函数,然而...无法监听demo.$watch('list', list => render(list));
setTimeout( function() { alert(demo.list); }, 5000,);
是的,Object.defineProperty
的第一个缺陷,无法监听数组变化。
然而Vue的文档提到了Vue是可以检测到数组变化的,但是只有以下八种方法,vm.items[indexOfItem] = newValue
这种是无法检测的。
push()pop()shift()unshift()splice()sort()reverse()
其实作者在这里用了一些奇技淫巧,把无法监听数组的情况hack掉了,以下是方法示例。
const aryMethods = ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'];const arrayAugmentations = [];
aryMethods.forEach((method)=> {
// 这里是原生Array的原型方法 let original = Array.prototype[method];
// 将push, pop等封装好的方法定义在对象arrayAugmentations的属性上 // 注意:是属性而非原型属性 arrayAugmentations[method] = function () { console.log('我被改变啦!');
// 调用对应的原生方法并返回结果 return original.apply(this, arguments); };
});
let list = ['a', 'b', 'c'];// 将我们要监听的数组的原型指针指向上面定义的空数组对象// 别忘了这个空数组的属性上定义了我们封装好的push等方法list.__proto__ = arrayAugmentations;list.push('d'); // 我被改变啦! 4
// 这里的list2没有被重新定义原型指针,所以就正常输出let list2 = ['a', 'b', 'c'];list2.push('d'); // 4
由于只针对了八种方法进行了hack,所以其他数组的属性也是检测不到的,其中的坑很多,可以阅读上面提到的文档。
我们应该注意到在上文中的实现里,我们多次用遍历方法遍历对象的属性,这就引出了Object.defineProperty
的第二个缺陷,只能劫持对象的属性,因此我们需要对每个对象的每个属性进行遍历,如果属性值也是对象那么需要深度遍历,显然能劫持一个完整的对象是更好的选择。
Object.keys(value).forEach(key => this.convert(key, value[key]));
3.Proxy实现的双向绑定的特点
Proxy在ES2015规范中被正式发布,它在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写,我们可以这样认为,Proxy是Object.defineProperty
的全方位加强版,具体的文档可以查看此处;
3.1 Proxy可以直接监听对象而非属性
我们还是以上文中用Object.defineProperty
实现的极简版双向绑定为例,用Proxy进行改写。
const input = document.getElementById('input');const p = document.getElementById('p');const obj = {};
const newObj = new Proxy(obj, { get: function(target, key, receiver) { console.log(`getting ${key}!`); return Reflect.get(target, key, receiver); }, set: function(target, key, value, receiver) { console.log(target, key, value, receiver); if (key === 'text') { input.value = value; p.innerHTML = value; } return Reflect.set(target, key, value, receiver); },});
input.addEventListener('keyup', function(e) { newObj.text = e.target.value;});
我们可以看到,Proxy直接可以劫持整个对象,并返回一个新对象,不管是操作便利程度还是底层功能上都远强于Object.defineProperty
。
3.2 Proxy可以直接监听数组的变化
当我们对数组进行操作(push、shift、splice等)时,会触发对应的方法名称和length的变化,我们可以借此进行操作,以上文中Object.defineProperty
无法生效的列表渲染为例。
const list = document.getElementById('list');const btn = document.getElementById('btn');
// 渲染列表const Render = { // 初始化 init: function(arr) { const fragment = document.createDocumentFragment(); for (let i = 0; i const li = document.createElement('li'); li.textContent = arr[i]; fragment.appendChild(li); } list.appendChild(fragment); }, // 我们只考虑了增加的情况,仅作为示例 change: function(val) { const li = document.createElement('li'); li.textContent = val; list.appendChild(li); },};
// 初始数组const arr = [1, 2, 3, 4];
// 监听数组const newArr = new Proxy(arr, { get: function(target, key, receiver) { console.log(key); return Reflect.get(target, key, receiver); }, set: function(target, key, value, receiver) { console.log(target, key, value, receiver); if (key !== 'length') { Render.change(value); } return Reflect.set(target, key, value, receiver); },});
// 初始化window.onload = function() { Render.init(arr);}
// push数字btn.addEventListener('click', function() { newArr.push(6);});
很显然,Proxy不需要那么多hack(即使hack也无法完美实现监听)就可以无压力监听数组的变化,我们都知道,标准永远优先于hack。
3.3 Proxy的其他优势
Proxy有多达13种拦截方法,不限于apply、ownKeys、deleteProperty、has等等是Object.defineProperty
不具备的。
Proxy返回的是一个新对象,我们可以只操作新的对象达到目的,而Object.defineProperty
只能遍历对象属性直接修改。
Proxy作为新标准将受到浏览器厂商重点持续的性能优化,也就是传说中的新标准的性能红利。
当然,Proxy的劣势就是兼容性问题,而且无法用polyfill磨平,因此Vue的作者才声明需要等到下个大版本(3.0)才能用Proxy重写。
双向绑定 当obj的值修改时_Vue3为什么选择Proxy做双向绑定?相关推荐
- 双向绑定 当obj的值修改时_JavaScript进阶之深入理解数据双向绑定
前言 谈起当前前端最热门的 js 框架,必少不了 Vue.React.Angular,对于大多数人来说,我们更多的是在使用框架,对于框架解决痛点背后使用的基本原理往往关注不多,近期在研读 Vue.js ...
- js 取得input绑定的datalist中的值_javascript基础修炼(9)——MVVM中双向数据绑定的基本原理...
[小宅按] 开发者的javascript造诣取决于对[动态]和[异步]这两个词的理解水平. 一. 概述 1.1 MVVM模型 MVVM模型是前端单页面应用中非常重要的模型之一,也是Single Pag ...
- input绑定的jedate日期控件的值改变时触发事件问题
一.input绑定的jedate日期控件的值改变时触发事件问题 一般input中值发生改变,用onchange 就可以触发事件,但我现用jedate日期控,选中日期后,发现onchange无效. 后经 ...
- 自制Windows 7 注册表键值修改服务(Service)
首先说说为什么要写这么一个服务.由于电脑要在公司域中使用,所以不可避免的会继承域中的组策略配置.域中95% 的计算机是XP系统,部分组策略对于Windows 7 系统来说有些多余而且带来很多麻烦. 问 ...
- layUI数据表格可编辑表格单元格值修改之后获取修改前的值
table.on('edit(data_table)', function(obj){ //注:edit是固定事件名,test是table原始容器的属性 lay-filter="对应的值&q ...
- 抖音怎么知道自己上热门 手机视频md5值修改
抖音怎么知道自己上热门 手机视频md5值修改 在这个背后其实代表的是流量向短视频平台的聚集,通过短视频的方式来进行流量变现成为很多内容创业者都在觊觎的全新领域., ...
- 适用于QMK的键值修改软件VIA
QMK可以方便的修改每个键位的键值,比如将QWERT改为小众的DVORAK布局,自定义组合键,自定义宏什么的.但每次修改都需要重新编译,刷固件,这就比较麻烦了.借助动态键值修改软件 VIA(https ...
- 视频伪原创工具 苹果手机视频md5值修改
视频伪原创工具 苹果手机视频md5值修改 每月输入一百万对你来说绝对是一件容易的事!. 视频伪原创工具 苹果手机视频md5值修改 自媒体运营技巧:短视频优质 ...
- mysql设置id起点_mysql自增ID起始值修改方法
在MysqL中很多朋友都认为字段为AUTO_INCREMENT类型自增ID值是无法修改,其实这样理解是错误的,下面介绍MysqL自增ID的起始值修改与设置方法. 通常的设置自增字段的方法:创建表格时添 ...
- pandas 根据某一列的值修改某一列的值
在做数据分析时,需要根据某一列的值修改另外一列的值,此时就需要使用pd.loc()函数. 例子, import pandas as pd x2 = pd.read_csv("submit.c ...
最新文章
- unicode环境下用CFile读取txt的若干疑惑,该如何处理
- CSocket类的Receive超时的问题解决方案
- 在同一网段内运行同一命令_怎么又是你?男子一天内2次酒驾被查,没想到碰上了同一个交警...
- DotText使用非80端口(默认端口)时URL出错
- .net开源框架简介和通用技术选型建议
- 作为一个女程序员,无奈!
- 高性能Web动画和渲染原理系列(4)“Compositor-Pipeline演讲PPT”学习摘要【华为云技术分享】
- linux开发板命令rx,linux 常用命令汇总
- PDF编辑器(PDF Editor)中文版
- Axure RP 9 汉化包
- 《完全写作指南》读书笔记
- networkx节点显示、节点中心性度量
- 数据库原理(2)——数据模型与概念模型
- 人这一辈子,都在为选择买单
- 【hadoop生态之Hive】Hive的数据类型【笔记+代码】
- 浙师大 计算机科学技术导论,计算机科学技术导论
- Unity-ProBuilder
- 《Fluent Python》读书笔记-2.5
- iOS经典错误library not found for -lXXX
- CAS算法与ABA问题
热门文章
- Android Browser学习九 快捷菜单模块: PieControl的架构
- 网管面试题1-windows
- 0/1背包——动态规划
- Java中的Calendar类add和set方法的区别
- python编一个答题程序_从0到1使用python开发一个半自动答题小程序的实现
- 嵌入式 Linux 4.0,嵌入式多媒体中心 OpenELEC 4.0.4
- linux添加磁盘分区,linux添加磁盘分区
- 周庄不买门票攻略_广东佛山旅游攻略好玩的地方景点推荐
- 蛋糕是叫胚子还是坯子_这个生日蛋糕太适合手残党了,不会裱花也能做,学会再不买着吃了...
- 附加属性来控制控件中,要扩展模块的visibility