Vue源码分析4 ---- depend和watcher数据监听

2024-05-13 06:38
文章标签 javascript 分析 数据 源码 vue 监听 frontend watcher depend

本文主要是介绍Vue源码分析4 ---- depend和watcher数据监听，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前面Array数据帧检测说完，下面接着说Vue数据侦测具体实现过程。下面我们说depend和watcher数据监听。
注意，本教程源码接着下面这个链接数据侦测变化继续写

Watcher和 Dep 定义

Watcher类是用来实时检测数据变化，并且通知dom变化。Watcher是一个中介，数据变化时通过Watcher中转，通知组件
Dep用来管理所有依赖

设计思路
在这里插入图片描述

看到这里，估计大都数小伙伴雾里看花。下面我们用代码手把手实现上面步骤。

1.实现 Dep 和Watcher类

把依赖手机的代码封装成一个Dep类，它专门用于管理依赖，每个Observer的实例，成员中都有一个Dep的实例
先创建 dep.js 文件

class Dep{constructor(arg) {console.log("I am Dep");}
}

然后在创建 Watcher.js 文件

class Watcher{constructor(arg) {console.log("I am watcher");}
}

修改index.html文件

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="./index.js" type="text/javascript" charset="utf-8"></script><script src="arry.js" type="text/javascript" charset="utf-8"></script><script src="dep.js" type="text/javascript" charset="utf-8"></script><script src="watcher.js" type="text/javascript" charset="utf-8"></script></head><body></body><script type="text/javascript">var Student ={name:"Tony",year:20,grade:{math:100,chinese:45},number:[12,23,23,[123,4324,423423]]}// defineReactive(Student,"name");observe(Student);console.log(Student);// console.log(Student.number[0]);// console.log(Student.number.splice(1,0,"213"));// console.log("Student.number.pop",Student.number.push([1,2,3]));// Student.name ="Janny";// console.log(Student.name);// Student.grade.math =20;// console.log(arrayMethods)</script>
</html>
在这里插入代码片

接着修改index.js 里面 defineReactive 函数， 源码下载地址

function defineReactive(obj, key, val) {console.log("我是defineReactive", obj, key);const dep = new Dep();if (arguments.length == 2) {val = obj[key];}var childOb = observe(val);Object.defineProperty(obj, key, {enumerable: true,configurable: true,get(){console.log('%s 属性被读取了', key);return val;},set(newVal) {console.log('%s 属性被写入', key, newVal);if (val === newVal) {return;}val = newVal;childOb = observe(val);//发布订阅模式dep.notify();}})
};

在 Observer 类 constructor 函数里面我们添加一行

this.dep=new Dep();

然后执行以上代码在浏览器console可以看到，每一层 Object.__ob__ 都包含dep属性
在这里插入图片描述
我们再看流程图，我们当数据更新时，需要通知依赖，因此我们这里添加Dep.notify方法，并且在setter里面调用通知

先修改 dep.js文件夹，添加notify属性

class Dep{constructor(arg) {console.log("I am Dep");}notify(){console.log("I am Dep notify");}
}

然后修改index.js文件，修改defineReactive 方法，在set添加调用notify方法

function defineReactive(obj, key, val) {console.log("我是defineReactive", obj, key);const dep = new Dep();if (arguments.length == 2) {val = obj[key];}var childOb = observe(val);Object.defineProperty(obj, key, {enumerable: true,configurable: true,get(){console.log('%s 属性被读取了', key);return val;},set(newVal) {console.log('%s 属性被写入', key, newVal);if (val === newVal) {return;}val = newVal;childOb = observe(val);//发布订阅模式dep.notify();}})
};

然后在浏览器console输入 Student.name="GoGo"，发现成功调用notify。说明object类通知依赖成功。
在这里插入图片描述
同样，我们在数组 array.js文件 Object.defineProperty 方法添加 ob.dep.notify(); 实现数组通知

methodToPatch.forEach(function(method) {console.log("forEach", method);const original = arrayProto[method];Object.defineProperty(arrayMethods, method, {emumerable: false,configurable: true,writable: true,value: function mutor(...args) {console.log("...args", ...args);const ob = this.__ob__;let inserted = [];switch (method) {case "push":case "unshift":inserted = args;break;case "splice":inserted =args.slice(2);//取splice第二个参数console.log("args:",args)console.log("inserted:",inserted)break;}if(inserted){ob.obserArray(inserted);}const result = original.apply(this, args);ob.dep.notify();return result;}})
})

到此为止我们大概写了Dep和Watcher核心框架，下面我们开始实现这两个类的核心代码。

然后我们继续写在Watcher 在Dep中读取数据，所以在原来 dep.js文件中添加以下代码

var uid = 0;
class Dep{constructor(arg) {console.log("I am Dep");this.id=uid++;this.subs = [];//这个数组里面放watcher实例}addSub(sub){this.subs.push(sub);}depend(){console.log("depend被调用了")if(Dep.target){console.log("Dep.target");this.addSub(Dep.target);}}notify(){console.log("I am Dep notify");}
}

在上面代码钟，我们在Dep内放一个subs属性，用于存watcher属性。
然后depend函数，用于watcher读取数据。
执行以上代码，我们发现每次getter读取数据，都会depend一次

在这里插入图片描述

接着我们在 Watcher 类继续添加源码。

首先我们先了解 parsePath 函数，改函数源码是，目的是获取相对于object对象的值。

function parsePath(str){var segments=str.split('.');console.log(segments,segments.length);return (obj)=>{for(let i=0;i<segments.length;i++){if(!obj) return;obj = obj[segments[i]]console.log("obj",obj);}return obj;};}

例如，想看以下代码，创建一个parsePath.html文件，输入以下代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body></body><script type="text/javascript">var str='grade.math';var student={name:"fyy",age:14,grade:{Chinese:100,math:90},sanwei:{heigh:30,weigh:40}}var fn =parsePath(str);console.log(fn)fn(student)function parsePath(str){var segments=str.split('.');console.log(segments,segments.length);return (obj)=>{for(let i=0;i<segments.length;i++){if(!obj) return;obj = obj[segments[i]]console.log("obj",obj);}return obj;};}</script>
</html>

执行以上程序，可以看到运行结果是
在这里插入图片描述
说明可以得到strudent.grade.math的参数为90，填入parsePath位字符串。

下面我们具体写Watcher 类，

var uid = 0;
class Watcher{constructor(target,expression,callback) {console.log("I am watcher");this.id= uid++;this.target = target;this.getter = parsePath(expression);this.callback=callback;this.value = this.get();//触发上面this.getter}get(){console.log("I am Watcher get");//进入依赖收集阶段，让全局Dep.target 设置为Watcher本身，那么就是进入依赖收集阶段Dep.target=this;console.log("开始传递参数 Dep.target");const obj =this.target;console.log("this.target",obj);var value;try{value =this.getter(obj);console.log("get value",value);}catch(e){//TODO handle the exceptionconsole.log("can not find",obj,e)}finally{Dep.target=null;}}return value
}function parsePath(str){var segements =str.split('.');return (obj)=>{for(let i =0 ; i < segements.length; i++){if(!obj)return;obj = obj[segements[i]]}console.log("parsePath",obj)return obj;}}

然后我们在index.html代码改成

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="./index.js" type="text/javascript" charset="utf-8"></script><script src="arry.js" type="text/javascript" charset="utf-8"></script><script src="dep.js" type="text/javascript" charset="utf-8"></script><script src="watcher.js" type="text/javascript" charset="utf-8"></script></head><body></body><script type="text/javascript">var Student ={name:"Tony",year:20,grade:{math:100,chinese:45},number:[12,23,23,[123,4324,423423]]}// defineReactive(Student,"name");observe(Student);console.log(Student);new Watcher(Student,'grade.math',(val,oldValue)=>{console.log("五星好评")console.log("watching",val,oldValue);});</script>
</html>

执行以上代码，可以得到

在这里插入图片描述
可以看到，当我们创建Watcher类的时候，参数输入需要监听的对象，参数和方法。实际上会调用Watcher.get()方法，该方法会触发对应属性 Object.defineProperty 的get方法，从而收集依赖，下面这张图可以说明Watcher如何读取数据。
这里Dep.target就是图中Window.target。
在这里插入图片描述
另外我们可以看到Dep.targe 是一个全局变量，存储Watcher.constructor属性。
在这里插入图片描述
到此为止，我们把依赖收集，依赖通知，还有Watcher读取数据已经实现了，剩下是依赖通知Watcher更新数据(notify)。

然后我们在 Wathcer类添加 update，run和getAndInvoke方法。其中getAndInvoke是核心，用于或者object对象的值并且调用callback回调函数

	update(){console.log("I am watcher update ");this.run();}run(){this.getAndInvoke(this.callback);}getAndInvoke(cb){console.log("getAndInvoke");const value =this.get();if(value!==this.value || typeof value == 'object'){const oldValue = this.value;this.value=value;cb.callback(this.target,value,oldValue)}console.log(value);}

然后我们完善Dep类notify函数。

	notify(){console.log("I am Dep notify");const subs= this.subs.slice();//浅克隆一份;for(let i=0,l=subs.length;i<l;i++){subs[i].update();console.log("subs[i]",i,subs[i]);}

该函数是通过Dep.notify通知Wathcer更新。
最后我们开始执行以下html代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="./index.js" type="text/javascript" charset="utf-8"></script><script src="arry.js" type="text/javascript" charset="utf-8"></script><script src="dep.js" type="text/javascript" charset="utf-8"></script><script src="watcher.js" type="text/javascript" charset="utf-8"></script></head><body></body><script type="text/javascript">var Student ={name:"Tony",year:20,grade:{math:100,chinese:45},number:[12,23,23,[123,4324,423423]]}// defineReactive(Student,"name");observe(Student);console.log(Student);new Watcher(Student,'grade.math',(val,oldValue)=>{console.log("五星好评")console.log("watching",val,oldValue);});Student.grade.math=300;</script>
</html>

最后查看执行结果：
在这里插入图片描述

以上就是Dep和watcher实现方法，估计看到这里读者依然不懂，在这里我只是提供思路还有重写步骤方法，建议您自己重写一次，再次看这篇教程才会深有体会。

结论

依赖就是Wather。只有Watcher触发的getter才会收集依赖，哪个Watcher触发了getter，就把哪个watcher收集到Dep中。
Dep使用发布订阅模式，当数据发生变化时，会循环依赖列表，把所有的Watcher都通知一遍。
Watcher 把自己设置到全局的一个指定文职，然后读取数据，因为读取了数据，所以会触发这个数据的getter。在getter中就能得到当前正在读取数据watcher，并把这个Watcher收集到Dep 中

以下链接是本教程所有源码 dep和watcher源码地址

这篇关于Vue源码分析4 ---- depend和watcher数据监听的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/984957。

相关文章

部署Vue项目到服务器后404错误的原因及解决方案

部署Vue项目到服务器后404错误的原因及解决方案

《部署Vue项目到服务器后404错误的原因及解决方案》文章介绍了Vue项目部署步骤以及404错误的解决方案,部署步骤包括构建项目、上传文件、配置Web服务器、重启Nginx和访问域名,404错误通常是... 目录一、vue项目部署步骤二、404错误原因及解决方案错误场景原因分析解决方案一、Vue项目部署步骤
阅读更多...
Springboot中分析SQL性能的两种方式详解

Springboot中分析SQL性能的两种方式详解

《Springboot中分析SQL性能的两种方式详解》文章介绍了SQL性能分析的两种方式：MyBatis-Plus性能分析插件和p6spy框架,MyBatis-Plus插件配置简单,适用于开发和测试环... 目录SQL性能分析的两种方式:功能介绍实现方式:实现步骤:SQL性能分析的两种方式:功能介绍记录
阅读更多...
前端原生js实现拖拽排课效果实例

前端原生js实现拖拽排课效果实例

《前端原生js实现拖拽排课效果实例》：本文主要介绍如何实现一个简单的课程表拖拽功能,通过HTML、CSS和JavaScript的配合,我们实现了课程项的拖拽、放置和显示功能,文中通过实例代码介绍的... 目录1. 效果展示2. 效果分析2.1 关键点2.2 实现方法3. 代码实现3.1 html部分3.2
阅读更多...
最长公共子序列问题的深度分析与Java实现方式

最长公共子序列问题的深度分析与Java实现方式

《最长公共子序列问题的深度分析与Java实现方式》本文详细介绍了最长公共子序列（LCS）问题,包括其概念、暴力解法、动态规划解法,并提供了Java代码实现,暴力解法虽然简单,但在大数据处理中效率较低,... 目录最长公共子序列问题概述问题理解与示例分析暴力解法思路与示例代码动态规划解法DP 表的构建与意义动
阅读更多...
CSS弹性布局常用设置方式

CSS弹性布局常用设置方式

《CSS弹性布局常用设置方式》文章总结了CSS布局与样式的常用属性和技巧,包括视口单位、弹性盒子布局、浮动元素、背景和边框样式、文本和阴影效果、溢出隐藏、定位以及背景渐变等,通过这些技巧,可以实现复杂... 一、单位元素vm 1vm 为视口的1%vh 视口高的1%vmin 参照长边vmax 参照长边re
阅读更多...
Redis的数据过期策略和数据淘汰策略

Redis的数据过期策略和数据淘汰策略

《Redis的数据过期策略和数据淘汰策略》本文主要介绍了Redis的数据过期策略和数据淘汰策略,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一... 目录一、数据过期策略1、惰性删除2、定期删除二、数据淘汰策略1、数据淘汰策略概念2、8种数据淘汰策略
阅读更多...
轻松上手MYSQL之JSON函数实现高效数据查询与操作

轻松上手MYSQL之JSON函数实现高效数据查询与操作

《轻松上手MYSQL之JSON函数实现高效数据查询与操作》：本文主要介绍轻松上手MYSQL之JSON函数实现高效数据查询与操作的相关资料,MySQL提供了多个JSON函数,用于处理和查询JSON数... 目录一、jsON_EXTRACT 提取指定数据二、JSON_UNQUOTE 取消双引号三、JSON_KE
阅读更多...
CSS3中使用flex和grid实现等高元素布局的示例代码

CSS3中使用flex和grid实现等高元素布局的示例代码

《CSS3中使用flex和grid实现等高元素布局的示例代码》：本文主要介绍了使用CSS3中的Flexbox和Grid布局实现等高元素布局的方法，通过简单的两列实现、每行放置3列以及全部代码的展示，展示了这两种布局方式的实现细节和效果，详细内容请阅读本文，希望能对你有所帮助... 过往的实现方法是使用浮动加
阅读更多...
css渐变色背景|＜gradient示例详解

css渐变色背景|＜gradient示例详解

《css渐变色背景|＜gradient示例详解》CSS渐变是一种从一种颜色平滑过渡到另一种颜色的效果,可以作为元素的背景,它包括线性渐变、径向渐变和锥形渐变，本文介绍css渐变色背景|＜gradien... 使用渐变色作为背景可以直接将渐China编程变色用作元素的背景，可以看做是一种特殊的背景图片。（是作为背
阅读更多...
Python给Excel写入数据的四种方法小结

Python给Excel写入数据的四种方法小结

《Python给Excel写入数据的四种方法小结》本文主要介绍了Python给Excel写入数据的四种方法小结,包含openpyxl库、xlsxwriter库、pandas库和win32com库,具有... 目录1. 使用 openpyxl 库2. 使用 xlsxwriter 库3. 使用 pandas 库
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2