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 相关文章推荐
js实现页面转发功能示例代码
Aug 05 Javascript
js清空表单数据的两种方式(遍历+reset)
Jul 18 Javascript
JS动态改变浏览器标题的方法
Apr 06 Javascript
jquery attr()设置和获取属性值实例教程
Sep 25 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
Nov 30 Javascript
微信小程序 闭包写法详细介绍
Dec 14 Javascript
Bootstrap 模态框实例插件案例分析
Dec 28 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
Apr 23 Javascript
修改vue源码实现动态路由缓存的方法
Jan 21 Javascript
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
Feb 10 Javascript
javascript设计模式 ? 中介者模式原理与用法实例分析
Apr 20 Javascript
Node在Controller层进行数据校验的过程详解
Aug 28 Javascript
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
咖啡磨器 如何选购一台适合家用的意式磨豆机
2021/03/05 新手入门
php设计模式 State (状态模式)
2011/06/26 PHP
php实现文件下载更能介绍
2012/11/23 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
thinkphp中U方法按路由规则生成url的方法
2018/03/12 PHP
jQuery实现的Email中的收件人效果(按del键删除)
2011/03/20 Javascript
页面右下角弹出提示框示例代码js版
2013/08/02 Javascript
javascript中Array数组的迭代方法实例分析
2015/02/04 Javascript
JavaScript基本语法讲解
2015/06/03 Javascript
HTML页面,测试JS对C函数的调用简单实例
2016/08/09 Javascript
vue从使用到源码实现教程详解
2016/09/19 Javascript
深入研究React中setState源码
2017/11/17 Javascript
vue通过路由实现页面刷新的方法
2018/01/25 Javascript
JS 正则表达式验证密码、邮箱格式的实例代码
2018/10/28 Javascript
JavaScript中this的学习笔记及用法整理
2020/02/17 Javascript
[51:00]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
详解Python中的type()方法的使用
2015/05/21 Python
python中list常用操作实例详解
2015/06/03 Python
Python中的with语句与上下文管理器学习总结
2016/06/28 Python
python将每个单词按空格分开并保存到文件中
2018/03/19 Python
Pandas对DataFrame单列/多列进行运算(map, apply, transform, agg)
2020/06/14 Python
python中关于数据类型的学习笔记
2020/07/19 Python
Html5 new XMLHttpRequest()监听附件上传进度
2021/01/14 HTML / CSS
欧缇丽英国官方网站:Caudalie英国
2016/08/17 全球购物
美国室内盆栽植物购买网站:Plants.com
2020/04/24 全球购物
北大研究生linux应用求职信
2013/10/29 职场文书
美德好少年事迹材料
2014/01/19 职场文书
教师对学生的寄语
2014/04/03 职场文书
拔河比赛口号
2014/06/10 职场文书
协会周年庆活动方案
2014/08/26 职场文书
大学团日活动新闻稿
2014/09/10 职场文书
九一八事变演讲稿范文
2014/09/14 职场文书
夫妻分居协议书范本
2014/11/28 职场文书
宝葫芦的秘密观后感
2015/06/11 职场文书
大学生暑期实践报告
2015/07/13 职场文书
2019幼儿园感恩节活动策划书
2019/11/28 职场文书