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判断屏幕分辨率的代码
Jul 16 Javascript
JS中类或对象的定义说明
Mar 10 Javascript
escape函数解决js中ajax传递中文出现乱码问题
Oct 30 Javascript
DOM基础教程之模型中的模型节点
Jan 19 Javascript
JQuery插件Quicksand实现超炫的动画洗牌效果
May 03 Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
Jul 26 Javascript
JS对HTML表格进行增删改操作
Aug 22 Javascript
jQuery实现的简单无刷新评论功能示例
Nov 08 jQuery
Vue2仿淘宝实现省市区三级联动
Apr 15 Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
Apr 23 Javascript
微信小程序实现3D轮播图效果(非swiper组件)
Sep 21 Javascript
vue实现分页的三种效果
Jun 23 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
php 面向对象的一个例子
2011/04/12 PHP
php学习笔记 PHP面向对象的程序设计
2011/06/13 PHP
ThinkPHP添加更新标签的方法
2014/12/05 PHP
Javascript 不能释放内存.
2006/09/07 Javascript
鼠标划过实现延迟加载并隐藏层的js代码
2013/10/11 Javascript
利用JavaScript的AngularJS库制作电子名片的方法
2015/06/18 Javascript
nodeJs内存泄漏问题详解
2016/09/05 NodeJs
将json转换成struts参数的方法
2016/11/08 Javascript
浅谈JavaScript正则表达式-非捕获性分组
2017/03/08 Javascript
详解angularjs利用ui-route异步加载组件
2017/05/21 Javascript
JQueryMiniUI按照时间进行查询的实现方法
2017/06/07 jQuery
Vue-router的使用和出现空白页,路由对象属性详解
2018/09/03 Javascript
vue二级菜单导航点击选中事件的方法
2018/09/12 Javascript
Cocos2d实现刮刮卡效果
2018/12/20 Javascript
vue 导航内容设置选中状态样式的例子
2019/11/01 Javascript
vue路由传参的基本实现方式小结【三种方式】
2020/02/05 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
2020/04/14 Javascript
vue使用Sass时报错问题的解决方法
2020/10/14 Javascript
js实现弹窗猜数字游戏
2020/11/26 Javascript
[03:11]TI9战队档案 - Alliance
2019/08/20 DOTA
用python实现的去除win下文本文件头部BOM的代码
2013/02/10 Python
python访问类中docstring注释的实现方法
2015/05/04 Python
谈谈如何手动释放Python的内存
2016/12/17 Python
Python实现合并同一个文件夹下所有PDF文件的方法示例
2018/04/28 Python
对python捕获ctrl+c手工中断程序的两种方法详解
2018/12/26 Python
Python面向对象程序设计OOP入门教程【类,实例,继承,重载等】
2019/01/05 Python
详解Django+uwsgi+Nginx上线最佳实战
2019/03/14 Python
python 实现图片批量压缩的示例
2020/12/18 Python
Python 获取异常(Exception)信息的几种方法
2020/12/29 Python
pycharm配置安装autopep8自动规范代码的实现
2021/03/02 Python
工程造价专业大学生职业生涯规划书
2014/01/18 职场文书
工程质量承诺书范文
2014/03/27 职场文书
企业活动策划方案
2014/06/02 职场文书
化学专业大学生职业生涯规划范文
2014/09/13 职场文书
财务总监岗位职责
2015/02/03 职场文书
销售内勤岗位职责范本
2015/04/13 职场文书