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 相关文章推荐
JQuery 简便实现页面元素数据验证功能
Mar 24 Javascript
HTA版JSMin(省略修饰语若干)基于javascript语言编写
Dec 24 Javascript
跨域请求之jQuery的ajax jsonp的使用解惑
Oct 09 Javascript
取消选中单选框radio的三种方式示例介绍
Dec 23 Javascript
JavaScript 事件对象介绍
Apr 13 Javascript
js实现顶部可折叠的菜单工具栏效果实例
May 09 Javascript
Bootstrap Paginator分页插件使用方法详解
May 30 Javascript
AngularJS基础 ng-focus 指令简单示例
Aug 01 Javascript
js中document.referrer实现移动端返回上一页
Feb 22 Javascript
react native实现往服务器上传网络图片的实例
Aug 07 Javascript
浅谈Javascript常用正则表达式应用
Mar 08 Javascript
JS中如何轻松遍历对象属性的方式总结
Aug 06 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
生成缩略图
2006/10/09 PHP
php中看实例学正则表达式
2006/12/25 PHP
php DOS攻击实现代码(附如何防范)
2012/05/29 PHP
2014年10个最佳的PHP图像操作库
2014/07/14 PHP
extJs 文本框后面加上说明文字+下拉列表选中值后触发事件
2009/11/27 Javascript
Firefox中beforeunload事件的实现缺陷浅析
2012/05/03 Javascript
js数组的操作详解
2013/03/27 Javascript
js string 转 int 注意的问题小结
2013/08/15 Javascript
jquery  实现轮播图详解及实例代码
2016/10/12 Javascript
javascript创建对象的3种方法
2016/11/02 Javascript
webpack常用配置项配置文件介绍
2016/11/07 Javascript
微信小程序 支付简单实例及注意事项
2017/01/06 Javascript
微信小程序 Button 组件详解及简单实例
2017/01/10 Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
2017/02/22 Javascript
JS正则表达式验证账号、手机号、电话和邮箱是否合法
2017/03/08 Javascript
angular2+nodejs实现图片上传功能
2017/03/27 NodeJs
Vue.js实现的计算器功能完整示例
2018/07/11 Javascript
区别JavaScript函数声明与变量声明
2018/09/12 Javascript
在Docker上部署Python的Flask框架的教程
2015/04/08 Python
Python实现的弹球小游戏示例
2017/08/01 Python
Python tornado队列示例-一个并发web爬虫代码分享
2018/01/09 Python
Django使用Celery异步任务队列的使用
2018/03/13 Python
详解Python3中的迭代器和生成器及其区别
2018/10/09 Python
python opencv 简单阈值算法的实现
2019/08/04 Python
python json load json 数据后出现乱序的解决方案
2020/02/27 Python
Python结合Window计划任务监测邮件的示例代码
2020/08/05 Python
TIME时代杂志台湾总代理:台时亚洲
2018/10/22 全球购物
eBay奥地利站:eBay.at
2019/07/24 全球购物
英国曼彻斯特宠物用品品牌:Bunty Pet Products
2019/07/27 全球购物
销售类求职信
2014/06/13 职场文书
瞿秋白纪念馆观后感
2015/06/10 职场文书
幼儿园六一儿童节开幕词
2016/03/04 职场文书
OpenCV中resize函数插值算法的实现过程(五种)
2021/06/05 Python
Python实现PIL图像处理库绘制国际象棋棋盘
2021/07/16 Python
nginx安装以及配置的详细过程记录
2021/09/15 Servers
python游戏开发之pygame实现接球小游戏
2022/04/22 Python