共计 3474 个字符，预计需要花费 9 分钟才能阅读完成。
关注「松宝写代码」，精选好文，每日一题
工夫永远是本人的
每分每秒也都是为本人的未来铺垫和增值
作者：saucxs | songEagle
起源：原创
一、前言
文章首发 wx 的「松宝写代码」
2020.12.23 日刚立的 flag，每日一题，题目类型不限度，能够是：算法题，面试题，论述题等等。
本文是「每日一题」第 5 题：「每日一题」到底该如何答复：vue 数据绑定的实现原理？
往期「每日一题」：
- 第 4 道「每日一题」与面试官手撕代码：如何迷信高效的寻找反复元素？
- 第 3 道「「每日一题」面试官问你对 Promise 的了解？可能是须要你能手动实现各个个性」
- 第 2 道 [「[ 每日一题]ES6 中为什么要应用 Symbol？」](https://mp.weixin.qq.com/s/om…
- 第 1 道「一道面试题是如何引发深层次的灵魂拷问？」
二、vue 数据绑定的实现原理？
这个题目自身不是特地难，只能说是作为社招的根底面试题，然而如果想答复好这道题也不是很容易。
不信接着往下看
1、概括答复
vue.js 是一个十分优良的前端开发框架，应用 vue 的版本是 v2.x
vue 几个外围的中央：vue 实例化，虚构 DOM，模板编译过程，数据绑定。
咱们开始回到正题，vue.js 的作者尤雨溪最后就是尝试实现一个相似 angular1 的货色，发现外面对于数据处理十分不优雅，于是创造性的尝试利用 ES5 中的 Object.defineProperty 来实现数据绑定，于是就有了最后的 vue。
vue 的数据绑定的实现原理离不开 vue 中响应式的数据处理形式。
咱们能够回忆一下官网的图：
vue 的响应式基本原理：
- 1、vue 会遍历此 data 中对象所有的属性，
- 2、并应用 Object.defineProperty 把这些属性全副转为 getter/setter，
- 3、而每个组件实例都有 watcher 对象，
- 4、它会在组件渲染的过程中把属性记录为依赖，
- 5、之后当依赖项的 setter 被调用时，会告诉 watcher 从新计算，从而以致它关联的组件得以更新。
2、亮点答复
概括答复咱们只答复了应用 ES5 的办法 Object.defineProperty 实现数据的监听的，那么具体是如何实现还是没有讲的很分明。
这时候咱们须要问本人，如何找亮点？
vue 的响应式原理设计三个重要对象：Observer，Watcher，Dep。
- Observer 对象：vue 中的数据对象在初始化过程中转换为 Observer 对象。
- Watcher 对象：将模板和 Observer 对象联合在一起生成 Watcher 实例，Watcher 是订阅者中的订阅者。
- Dep 对象：Watcher 对象和 Observer 对象之间纽带，每一个 Observer 都有一个 Dep 实例，用来存储订阅者 Watcher。
当属性变动会执行主题对象 Observer 的 dep.notify 办法，这个办法会遍历订阅者 Watcher 列表向其发送音讯，Watcher 会执行 run 办法去更新视图。
依赖关系图如下，更能方面咱们的了解
接着咱们须要补充的是：模板编译过程中的指令和数据绑定都会生成 Watcher 实例，实例中的 watch 属性也会生成 Watcher 实例。
说的这些有没有感觉有点乱，那咱们总结一下如何亮点答复
- 1、在生命周期的 initState 办法中将 data，prop，method，computed，watch 中的数据劫持，通过 observe 办法与 Object.defineProperty 办法将相干对象转为换 Observer 对象。
- 2、而后在 initRender 办法中解析模板，通过 Watcher 对象，Dep 对象与观察者模式将模板中的 指令与对象的数据建设依赖关系，应用全局对象 Dep.target 实现依赖收集。
- 3、当数据变动时，setter 被调用，触发 Object.defineProperty 办法中的 dep.notify 办法，遍历该数据依赖列表，执行器 update 办法告诉 Watcher 进行视图更新。
- vue 是无奈检测到对象属性的增加和删除，然而能够应用全局 Vue.set 办法（或 vm.$set 实例办法）。
- vue 无奈检测利用索引设置数组，然而能够应用全局 Vue.set 办法（或 vm.$set 实例办法）。
- 无奈检测间接批改数组长度，然而能够应用 splice
而后写一个应用 Object.defineProperty 实现监听变量
var obj = {};
var a;
Object.defineProperty(obj, 'a', {get: function() {console.log('get val');
return a;
},
set: function(newVal) {console.log('set val:' + newVal);
a = newVal;
}
});
obj.a; // get val
obj.a = 'saucxs' //set val如果下面代码格局呈现问题，能够查看上面代码图片
3、进阶答复
因为当初 vue 曾经到 3 了，不再是停留在 2 的时候，这个时候，能够把 3 的原理简略说一下。
这个时候不应该是 ES6 的 proxy 个性上场了，proxy 是 ES6 的新增的性能，能够用来定义对象中的操作。
let p = new Proxy(target, handler);
// `target` 代表须要增加代理的对象
// `handler` 用来自定义对象中的操作 如果下面代码格局呈现问题，能够查看上面代码图片
能够很不便的应用 Proxy 来实现一个数据绑定和监听.
let onWatch = (obj, setBind, getLogger) => {
let handler = {get(target, property, receiver) {getLogger(target, property)
return Reflect.get(target, property, receiver);
},
set(target, property, value, receiver) {setBind(value);
return Reflect.set(target, property, value);
}
};
return new Proxy(obj, handler);
};
let obj = {saucxs: 1}
let value
let p = onWatch(obj, (v) => {value = v}, (target, property) => {console.log(`Get '${property}' = ${target[property]}`);
})
p.saucxs = songEagle // bind `value` to `songEagle`
p.saucxs // -> Get 'saucxs' = songEagle如果下面代码格局呈现问题，能够查看上面代码图片
而后在比照 vue2 和 vue3 的区别是什么？
以及为啥在数据监听上做了降级？
vue 为什么对数组对象的深层监听无奈实现，因为组件每次渲染都是将 data 里的数据通过 defineProperty 进行响应式或者双向绑定上，之前没有后加的属性是不会被绑定上，也就不会触发更新渲染。
区别：
1、语法层面上
- defineProperty 只能响应首次渲染时候的属性，
- Proxy 须要的是整体监听，不须要关怀外面有什么属性，而且 Proxy 的配置项有 13 种，能够做更粗疏的事件，这是之前的 defineProperty 无奈达到的。
2、兼容层面上
- vue2.x 之所以只能兼容到 IE8 就是因为 defineProperty 无奈兼容 IE8, 其余浏览器也会存在轻微兼容问题。
- proxy 的话除了 IE，其余浏览器都兼容，这次 vue3 还是应用了它，阐明 vue3 间接放弃了 IE 的兼容思考。
各种福利
「松宝写代码」：开发常识体系构建，技术分享，我的项目实战，实验室，每日一题，带你一起学习新技术，总结学习过程，让你进阶到高级资深工程师，学习项目管理，思考职业倒退，生存感悟，空虚中成长起来。问题或倡议，请公众号留言。
1、字节内推福利
回复「校招」获取内推码
回复「社招」获取内推
回复「实习生」获取内推
后续会有更多福利
2、学习材料福利
回复「算法」获取算法学习材料
3、每日一题
- 本文是「每日一题」第 5 题：「每日一题」到底该如何答复：vue 数据绑定的实现原理？
- 第 4 道「每日一题」与面试官手撕代码：如何迷信高效的寻找反复元素？
- 第 3 道「「每日一题」面试官问你对 Promise 的了解？可能是须要你能手动实现各个个性」
- 第 2 道 [「[ 每日一题]ES6 中为什么要应用 Symbol？」](https://mp.weixin.qq.com/s/om…
- 第 1 道「一道面试题是如何引发深层次的灵魂拷问？」
