vue双向绑定、Proxy、defineproperty

本文原连接：https://www.jianshu.com/p/2df6dcddb0d7

前言

双向绑定其实已是一个老掉牙的问题了,只要涉及到MVVM框架就不得不谈的知识点,但它毕竟是Vue的三要素之一.javascript

Vue三要素php

响应式: 例如如何监听数据变化,其中的实现方法就是咱们提到的双向绑定
模板引擎: 如何解析模板
渲染: Vue如何将监听到的数据变化和解析后的HTML进行渲染

能够实现双向绑定的方法有不少,KnockoutJS基于观察者模式的双向绑定,Ember基于数据模型的双向绑定,Angular基于脏检查的双向绑定,本篇文章咱们重点讲面试中常见的基于数据劫持的双向绑定。html

常见的基于数据劫持的双向绑定有两种实现,一个是目前Vue在用的Object.defineProperty,另外一个是ES2015中新增的Proxy,而Vue的做者宣称将在Vue3.0版本后加入Proxy从而代替Object.defineProperty,经过本文你也能够知道为何Vue将来会选择Proxy。vue

严格来说Proxy应该被称为『代理』而非『劫持』,不过因为做用有不少类似之处,咱们在下文中就再也不作区分,统一叫『劫持』。java

咱们能够经过下图清楚看到以上两种方法在双向绑定体系中的关系.react

<figure style="display: block; margin: 22px auto; text-align: center;">[图片上传中...(image-6f9b58-1526012269856-2)]es6

<figcaption style="display: block; text-align: center; font-size: 1rem; line-height: 1.6; color: rgb(144, 144, 144); margin-top: 2px;"></figcaption>面试

</figure>segmentfault

基于数据劫持的固然还有已经凉透的Object.observe方法,已被废弃。api

提早声明: 咱们没有对传入的参数进行及时判断而规避错误,仅仅对核心方法进行了实现.

文章目录

基于数据劫持实现的双向绑定的特色
基于Object.defineProperty双向绑定的特色
基于Proxy双向绑定的特色

1.基于数据劫持实现的双向绑定的特色

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提供的指令进行视图渲染,使得数据变化促使视图变化

<figure style="display: block; margin: 22px auto; text-align: center;">[图片上传中...(image-1f5ab-1526012269856-1)]

</figure>

咱们看到，虽然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');&emsp; }, 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; })

在线示例极简版双向绑定 by Iwobi (@xiaomuzhu) on CodePen.

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

看下效果:

<figure style="display: block; margin: 22px auto; text-align: center;">[图片上传中...(image-1da193-1526012269854-0)]

</figure>

在线示例双向绑定实现---无漏洞版 by Iwobi (@xiaomuzhu) on CodePen.

至此,一个简单的双向绑定算是被咱们实现了。

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 < arr.length; 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, );

在线示例双向绑定-数组漏洞 by Iwobi (@xiaomuzhu) on CodePen.

是的,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版 by Iwobi (@xiaomuzhu) on CodePen.

咱们能够看到,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 < arr.length; 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列表渲染 by Iwobi (@xiaomuzhu) on CodePen.

很显然,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重写。