IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 图解:vue依赖收集及派发更新 -> 正文阅读

[JavaScript知识库]图解:vue依赖收集及派发更新

前面也已经写过vue的依赖收集和派发更新的源码讲解了,但是估计很多不了解的人看的仍然一头雾水,还是不能明白整个流程是怎样的。因此我又花了一些时间来弄懂这块梳理成图,阅读性也更好一些。
话不多说,开始上图了:

依赖收集

在这里插入图片描述
这里给大家备注一下某些变量的作用:

subs:
Dep类创建的,用于存放所有被收集的依赖即watcher,将依赖存放在subs中,目的是后面数据发生变化的时候能够通知那些subs做出准备。
watcher中定义的:

  • newDeps:表示新添加的Dep实例数组
  • deps:表示上一次添加的Dep实例数组
  • newDepIds:表示在最新的 addDep过程中,收集的 dep id
  • depIds:表示在 上一次addDep 过程中,收集的 dep id。

为什么vue要创建两个Dep实例数组?
因为Vue是数据驱动的,所以每次数据变化都会重新render,那么 vm._render() 方法又会再次执行,并再次触发数据的 getters,所以 Watcher 在构造函数中会初始化 2 个 Dep 实例数组。目的是在
在执行 cleanupDeps 函数的时候,会首先遍历 deps,移除对 dep.subs 数组中 Wathcer 的订阅,然后把 newDepIds 和 depIds 交换,newDeps 和 deps 交换,并把 newDepIds 和 newDeps 清空。避免渲染不必要的数据,提升了性能。

派发更新

![在这里插入图片描述](https://img-blog.csdnimg.cn/f6970cd3738f41ebaa2ffeec9730487c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAeWV6aV9fNjI2,size_20,color_FFFFFF,t_70,g_se,x_16
queueWatcher:就是将watcher去重,然后添加到队列中。然后执行nextTick(flushSchedulerQueue)异步更新。

flushSchedulerQueue:这个方法简单来说就是对queue队列排序,然后遍历该数组,执行watcher.run()

watcher.run():这个run()方法其实最终就是调用了watcherget方法,这个get我们在前面看过了,最主要的就是去调用了data数据的get方法,获取最新数据。因此我们可以理解run()就会进行新一轮的依赖收集,从而获取最新的数据。

最后我们简单总结一下依赖收集和派发更新:
当访问响应式数据时,触发getter,调用dep.depend()进行依赖收集到subs中,这个过程我们叫依赖收集;而当这些响应式数据发生变化,触发它们的 setter 的时候,能知道应该通知哪些订阅者去做相应的逻辑处理,我们把这个过程叫派发更新。
Watcher 和 Dep 就是一个非常经典的观察者设计模式的实现,这里我们暂时先不讲,后面有空的话我会补上哦!

感谢大家的浏览,希望对你们有用!谢谢

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-03-06 12:53:24  更:2022-03-06 12:53:31 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 8:59:54-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码