Vue2 响应式系统之异步队列
试想一下如果这里的 console.log 是渲染页面，那改变一次值就刷新一下页面，会造成严重的性能问题，页面也会不停的改变。
场景
import { observe } from "./reactive";
import Watcher from "./watcher";
const data = {
a: 1,
b: 2,
c: 3,
};
observe(data);
const updateComponent = () => {
console.log(data.a + data.b);
};
new Watcher(updateComponent);
const updateComponent2 = () => {
console.log(data.c);
};
new Watcher(updateComponent2);
data.a = 2;
data.a = 3;
data.b = 4;
data.c = 5;new Watcher(updateComponent) 进行依赖收集会输出一次 3 ，new Watcher(updateComponent2) 进行依赖收集也会输出一次 3 。
之后我们依次改变 a、 a 、b、c 的值，每改变一次就会触发 Watcher 的执行，会连续进行四次的 console.log。
试想一下如果这里的 console.log 是渲染页面，那改变一次值就刷新一下页面，会造成严重的性能问题，页面也会不停的改变。
解决方案
我们可以通过一个队列，收集所有的 Watcher 。
那什么时候执行 Watcher 队列呢?
为了等所有的 Watcher 都收集完毕，可以将 Watcher 的执行放到 setTimeout 中。这样当主线程全部执行后，才会去执行 Watcher 队列。
代码实现
我们可以给每一个 Watcher 加上一个 id，如果队列中已经有 id 了就不加入队列。
let uid = 0;
export default class Watcher {
constructor(Fn, options) {
this.getter = Fn;
this.depIds = new Set(); // 拥有 has 函数可以判断是否存在某个 id
this.deps = [];
this.newDeps = []; // 记录新一次的依赖
this.newDepIds = new Set();
/******新增 *************************/
this.id = ++uid; // uid for batching
// options
if (options) {
this.sync = !!options.sync;
}
/************************************/
this.get();
}
...
}我们同时提供了一个 options 对象，保存了其中的 sync 字段，表示是像之前一样立即出触发 Watcher 还是放到队列中。
然后 Watcher 的 update 方法中我们去调用加入队列的函数。
export default class Watcher {
...
update() {
if (this.sync) {
this.run(); // 直接运行
} else {
queueWatcher(this); // 加入队列
}
}
...
}看一下 queueWatcher 的实现。
const queue = []; // 保存 Watcher 队列
let has = {}; // 去重 Watcher
let waiting = false; // 是否加入到了 setTimeout 队列
export function queueWatcher(watcher) {
const id = watcher.id;
if (has[id] == null) {
has[id] = true;
queue.push(watcher); // 加入队列
// queue the flush
if (!waiting) { // 执行 Watcher 函数放到 setTimeout 队列中，只加入一次即可
waiting = true;
setTimeout(flushSchedulerQueue, 0);
}
}
}再看一下上边执行 Watcher 队列的 flushSchedulerQueue 函数的实现。
let flushing = false; // 是否正在执行队列
let index = 0;
/**
* Flush both queues and run the watchers.
*/
function flushSchedulerQueue() {
flushing = true;
let watcher, id;
for (index = 0; index < queue.length; index++) {
watcher = queue[index];
id = watcher.id;
has[id] = null;
watcher.run();
}
resetSchedulerState(); // 执行结束后进行重置
}
/**
* Reset the scheduler's state.
*/
function resetSchedulerState() {
index = queue.length = 0;
has = {};
waiting = flushing = false;
}总体上就是上边的样子了。
执行结果
import { observe } from "./reactive";
import Watcher from "./watcher";
const data = {
a: 1,
b: 2,
c: 3,
};
observe(data);
const updateComponent = () => {
console.log(data.a + data.b);
};
new Watcher(updateComponent);
const updateComponent2 = () => {
console.log(data.c);
};
new Watcher(updateComponent2);
data.a = 2;
data.a = 3;
data.b = 4;
data.c = 5;虽然后边我们改变了四次 data 中的值，但事实上只有两个 Watcher ，因此只会输出两次。
总结
通过异步的一个队列，当所有 Watcher 收集完毕后统一执行，进行了性能方面的优化。
到此这篇关于Vue2 响应式系统之异步队列的文章就介绍到这了,更多相关Vue2 异步队列内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue三元运算之多重条件判断方式(多个枚举值转译)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
本文主要介绍了element step组件在另一侧加时间轴显示，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
vue是一款具有响应式更新机制的框架，既可以实现单向数据流也可以实现数据的双向绑定。这篇文章主要介绍了vue响应式更新机制及不使用框架实现简单的数据双向绑定问题,需要的朋友可以参考下2019-06-06
下面小编就为大家分享一篇浅谈vue.js导入css库(elementUi)的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了实现一个Vue自定义指令懒加载的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-06-06
Vue OptionsAPI与CompositionAPI的区别与使用介绍
OptionsAPI和CompositionAPI是Vue.js框架中两种不同的组件编写方式,OptionsAPI通过对象字面量定义组件,以属性分隔不同功能,响应式数据通过data属性定义,本文给大家介绍Vue OptionsAPI与CompositionAPI的区别,感兴趣的朋友一起看看吧2024-10-10
这篇文章主要为大家介绍了vue项目里的权限控制，文中有详细的代码示例供大家参考，有需要的朋友可以借鉴参考下，希望能够有所帮助2023-06-06
这篇文章主要介绍了使用Vue3实现点击按钮实现文字变色功能,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2024-07-07
这篇文章主要介绍了vue从仓库state中取不到数据的问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要为大家详细介绍了Vue如何获取数据列表展示，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-12-12
最新评论