vue.js响应式原理解析与实现


Posted in Javascript onJune 22, 2020

从很久之前就已经接触过了angularjs了,当时就已经了解到,angularjs是通过脏检查来实现数据监测以及页面更新渲染。之后,再接触了vue.js,当时也一度很好奇vue.js是如何监测数据更新并且重新渲染页面。今天,就我们就来一步步解析vue.js响应式的原理,并且来实现一个简单的demo。

首先,先让我们来了解一些基础知识。

基础知识

Object.defineProperty

es5新增了Object.defineProperty这个api,它可以允许我们为对象的属性来设定getter和setter,从而我们可以劫持用户对对象属性的取值和赋值。比如以下代码:

const obj = {
};

let val = 'cjg';
Object.defineProperty(obj, 'name', {
 get() {
 console.log('劫持了你的取值操作啦');
 return val;
 },
 set(newVal) {
 console.log('劫持了你的赋值操作啦');
 val = newVal;
 }
});

console.log(obj.name);
obj.name = 'cwc';
console.log(obj.name);

我们通过Object.defineProperty劫持了obj[name]的取值和赋值操作,因此我们就可以在这里做一些手脚啦,比如说,我们可以在obj[name]被赋值的时候触发更新页面操作。

发布订阅模式

发布订阅模式是设计模式中比较常见的一种,其中有两个角色:发布者和订阅者。多个订阅者可以向同一发布者订阅一个事件,当事件发生的时候,发布者通知所有订阅该事件的订阅者。我们来看一个例子了解下。

class Dep {
 constructor() {
 this.subs = [];
 }
 // 增加订阅者
 addSub(sub) {
 if (this.subs.indexOf(sub) < 0) {
 this.subs.push(sub);
 }
 }
 // 通知订阅者
 notify() {
 this.subs.forEach((sub) => {
 sub.update();
 })
 }
}

const dep = new Dep();

const sub = {
 update() {
 console.log('sub1 update')
 }
}

const sub1 = {
 update() {
 console.log('sub2 update');
 }
}

dep.addSub(sub);
dep.addSub(sub1);

dep.notify(); // 通知订阅者事件发生,触发他们的更新函数

动手实践

我们了解了Object.defineProperty和发布订阅者模式后,我们不难可以想到,vue.js是基于以上两者来实现数据监听的。

1、vue.js首先通过Object.defineProperty来对要监听的数据进行getter和setter劫持,当数据的属性被赋值/取值的时候,vue.js就可以察觉到并做相应的处理。
2、通过订阅发布模式,我们可以为对象的每个属性都创建一个发布者,当有其他订阅者依赖于这个属性的时候,则将订阅者加入到发布者的队列中。利用Object.defineProperty的数据劫持,在属性的setter调用的时候,该属性的发布者通知所有订阅者更新内容。

接下来,我们来动手实现(详情可以看注释):

class Observer {
 constructor(data) {
 // 如果不是对象,则返回
 if (!data || typeof data !== 'object') {
 return;
 }
 this.data = data;
 this.walk();
 }

 // 对传入的数据进行数据劫持
 walk() {
 for (let key in this.data) {
 this.defineReactive(this.data, key, this.data[key]);
 }
 }
 // 创建当前属性的一个发布实例,使用Object.defineProperty来对当前属性进行数据劫持。
 defineReactive(obj, key, val) {
 // 创建当前属性的发布者
 const dep = new Dep();
 /*
 * 递归对子属性的值进行数据劫持,比如说对以下数据
 * let data = {
 * name: 'cjg',
 * obj: {
 * name: 'zht',
 * age: 22,
 * obj: {
 * name: 'cjg',
 * age: 22,
 * }
 * },
 * };
 * 我们先对data最外层的name和obj进行数据劫持,之后再对obj对象的子属性obj.name,obj.age, obj.obj进行数据劫持,层层递归下去,直到所有的数据都完成了数据劫持工作。
 */
 new Observer(val);
 Object.defineProperty(obj, key, {
 get() {
 // 若当前有对该属性的依赖项,则将其加入到发布者的订阅者队列里
 if (Dep.target) {
  dep.addSub(Dep.target);
 }
 return val;
 },
 set(newVal) {
 if (val === newVal) {
  return;
 }
 val = newVal;
 new Observer(newVal);
 dep.notify();
 }
 })
 }
}

// 发布者,将依赖该属性的watcher都加入subs数组,当该属性改变的时候,则调用所有依赖该属性的watcher的更新函数,触发更新。
class Dep {
 constructor() {
 this.subs = [];
 }

 addSub(sub) {
 if (this.subs.indexOf(sub) < 0) {
 this.subs.push(sub);
 }
 }

 notify() {
 this.subs.forEach((sub) => {
 sub.update();
 })
 }
}

Dep.target = null;

// 观察者
class Watcher {
 /**
 *Creates an instance of Watcher.
 * @param {*} vm
 * @param {*} keys
 * @param {*} updateCb
 * @memberof Watcher
 */
 constructor(vm, keys, updateCb) {
 this.vm = vm;
 this.keys = keys;
 this.updateCb = updateCb;
 this.value = null;
 this.get();
 }

 // 根据vm和keys获取到最新的观察值
 get() {
 Dep.target = this;
 const keys = this.keys.split('.');
 let value = this.vm;
 keys.forEach(_key => {
 value = value[_key];
 });
 this.value = value;
 Dep.target = null;
 return this.value;
 }

 update() {
 const oldValue = this.value;
 const newValue = this.get();
 if (oldValue !== newValue) {
 this.updateCb(oldValue, newValue);
 }
 }
}

let data = {
 name: 'cjg',
 obj: {
 name: 'zht',
 },
};

new Observer(data);
// 监听data对象的name属性,当data.name发现变化的时候,触发cb函数
new Watcher(data, 'name', (oldValue, newValue) => {
 console.log(oldValue, newValue);
})

data.name = 'zht';

// 监听data对象的obj.name属性,当data.obj.name发现变化的时候,触发cb函数
new Watcher(data, 'obj.name', (oldValue, newValue) => {
 console.log(oldValue, newValue);
})

data.obj.name = 'cwc';
data.obj.name = 'dmh';

结语

这样,一个简单的响应式数据监听就完成了。当然,这个也只是一个简单的demo,来说明vue.js响应式的原理,真实的vue.js源码会更加复杂,因为加了很多其他逻辑。

接下来我可能会将其与html联系起来,实现v-model、computed和{{}}语法。代码地址 有兴趣的欢迎来一起研究探讨下。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
特殊字符、常规符号及其代码对照表
Jun 26 Javascript
js下通过prototype扩展实现indexOf的代码
Dec 08 Javascript
js innerHTML 改变div内容的方法
Aug 03 Javascript
检查输入的是否是数字使用keyCode配合onkeypress事件
Jan 23 Javascript
js获取滚动距离的方法
May 30 Javascript
理解JavaScript的变量的入门教程
Jul 07 Javascript
JavaScript实现Base64编码转换
Apr 23 Javascript
JS HTML5拖拽上传图片预览
Jul 18 Javascript
Bootstrap4如何定制自己的颜色和风格
Feb 26 Javascript
Vue组件模板及组件互相引用代码实例
Mar 11 Javascript
微信分享invalid signature签名错误踩过的坑
Apr 11 Javascript
vue+elementui 实现新增和修改共用一个弹框的完整代码
Jun 08 Vue.js
JavaScript Canvas实现验证码
Aug 02 #Javascript
JS实现方形抽奖效果
Aug 27 #Javascript
对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解
Aug 27 #Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
Aug 27 #Javascript
JS实现匀速与减速缓慢运动的动画效果封装示例
Aug 27 #Javascript
vue展示dicom文件医疗系统的实现代码
Aug 27 #Javascript
vue中子组件的methods中获取到props中的值方法
Aug 27 #Javascript
You might like
linux下删除7天前日志的代码(php+shell)
2011/01/02 PHP
PHP中如何调用webservice的实例参考
2013/04/25 PHP
PHP变量内存分配问题记录整理
2013/11/27 PHP
PHP利用二叉堆实现TopK-算法的方法详解
2017/04/24 PHP
JavaScript游戏之是男人就下100层代码打包
2010/11/08 Javascript
js实现的跟随鼠标移动的时钟效果(中英文日期显示)
2011/01/17 Javascript
jQuery表格插件datatables用法总结
2014/09/05 Javascript
smartcrop.js智能图片裁剪库
2015/10/14 Javascript
AngularJS  $on、$emit和$broadcast的使用
2016/09/05 Javascript
原生js实现键盘控制div移动且解决停顿问题
2016/12/05 Javascript
前端面试知识点锦集(JavaScript篇)
2016/12/28 Javascript
详解EasyUi控件中的Datagrid
2017/08/23 Javascript
JS求Number类型数组中最大元素方法
2018/04/08 Javascript
小程序登录态管理的方法示例
2018/11/13 Javascript
Vue+Bootstrap实现简易学生管理系统
2021/02/09 Vue.js
如何解决django配置settings时遇到Could not import settings 'conf.local'
2014/11/18 Python
Python素数检测实例分析
2015/06/15 Python
Python base64编码解码实例
2015/06/21 Python
Python找出9个连续的空闲端口
2016/02/01 Python
Python常见格式化字符串方法小结【百分号与format方法】
2016/09/18 Python
python 中文件输入输出及os模块对文件系统的操作方法
2018/08/27 Python
python爬虫 基于requests模块的get请求实现详解
2019/08/20 Python
python如果快速判断数字奇数偶数
2019/11/13 Python
利用python实现PSO算法优化二元函数
2019/11/13 Python
python列表的逆序遍历实现
2020/04/20 Python
13个Pandas实用技巧,助你提高开发效率
2020/08/19 Python
如何用border-image实现文字气泡边框的示例代码
2020/01/21 HTML / CSS
prAna官网:瑜伽、旅行和冒险服装
2019/03/10 全球购物
Prototype是怎么扩展DOM的
2014/10/01 面试题
食堂员工工作职责
2013/12/18 职场文书
中学生寄语大全
2014/04/03 职场文书
未婚证明范本
2015/06/15 职场文书
小学生教师节广播稿
2015/08/19 职场文书
高三语文教学反思
2016/02/16 职场文书
2016简单的租房合同范本
2016/03/18 职场文书
2016年小学六一儿童节活动总结
2016/04/06 职场文书