异步队列渲染

上一篇文章是在vue2.0 中通过Object.defineProperty去拦截并监听数据变化的响应式原理,这篇文章将会沿着图谱继续深入探索,在依赖被通知变化了之后,会触发vue当中的异步渲染队列,这里我们就是要研究以下几点:

  1. 为什么要设计成异步渲染队列
  2. 渲染是如何实现的
  3. 因为异步渲染队列而产生的nextTick, 并了解nextTick的使用场景

对上次的代码做一个改造,使得模板依赖的变量增加时,如下面这样

let x = ref(1);
let y = ref(1);
let z = ref(1); onXChanged(() => {
console.log(`x: ${x.value}, y: ${y.value}, z: ${z.value}`);
}); x.value = 2;
y.value = 3;
z.value = 4;

控制台打印的结果如下:

我们可以看出x, y, z 的更改分别被执行了1次,那这些数据都是存在于模板中的,所以我们会认为这个模板被渲染了3次。那实际项目中,  多次渲染就产生很多的开销了。 所以从上面的这个例子我们发现,当模板中存在多出变量依赖的时候,每一个变量修改的时候,都会导致一次渲染,是否可以优化?

我们可以思考下实际工作中遇到的场景:

平时我们工作的时候,如果每隔一段时间,也许是5min或者10min,都会有一个策划向你提出需求时,或者一个新员工向你请教问题,或者一个测试人员向你提出bug, 如果这种频率出现很高,那我相信它一定会占用你的正常编码时间,使得你更加不能专注的完成你的本职工作了,那么我们一般可能都会选择把他们要做的事情先放到一边,让他们等一等,和自己约定一个时间,也许是45分钟或者1个小时,那么可以让自己在这段时间更加专注自己的本职工作,然后再去处理其他的事情。

其实vue中异步更新队列, 逻辑也是差不多的。当我们在一个函数块中包含对多个变量的依赖时,可以将这些依赖放入一个队列中,等到当前函数更新一次完成后,在进行批量的渲染操作,下面是具体的实现代码

(function () {
// let f = n => n * 100 + 200;
let active; let watch = function (cb) {
active = cb;
active();
active = null;
}
// 需要有个队列来存储各项任务
let queue = [];
// 通过微任务方式去执行队列中的任务
let nextTick = cb => Promise.resolve().then(cb);
// 将任务添加到队列
let queueJob = job => {
if (!queue.includes(job)) {
queue.push(job)
nextTick(flushJobs)
}
} // 执行队列中的任务
let flushJobs = () => {
let job;
while ((job = queue.shift()) !== undefined) {
job()
}
} // 收集更多依赖
class Dep {
// 依赖收集,将响应依赖添加到deps中
constructor() {
this.deps = new Set();
} depend() {
if (active) {
this.deps.add(active)
}
}
// 通知依赖更新
notify() {
// 将任务加到队列中
this.deps.forEach(dep => queueJob(dep))
}
} let ref = initValue => {
let value = initValue;
let dep = new Dep(); return Object.defineProperty({}, "value", {
get() {
dep.depend();
return value;
},
set(newValue) {
value = newValue;
dep.notify()
}
})
} let x = ref(1);
let y = ref(1);
let z = ref(1); watch(() => {
console.log(`x: ${x.value}, y: ${y.value}, z: ${z.value}`);
}); x.value = 2;
y.value = 3;
z.value = 4;
})()

测试结果如下:

这样我们可以让所以依赖更新完后,模板重新渲染一次

上面的 nextTick 返回一个Promise,需要注意的是在下次Dom更新循环结束之后执行延迟回调。

在 Vue中会有两种场景:

  1. Vue.nextTick([callback,context])
  2. vm.$nextTick([callback])
  • 将回调延迟到下次DOM更新循环之后执行。
  • 通常用于在修改数据之后使用这个方法,在回调中获取更新后的DOM
  • 实例中的方法会将callback的this 会自动绑定到实例上
  • 在生命周期钩子函数中mounted和updated直接执行的代码并不能保证子组件有完全的挂载或者更新,这个时候我们可以使用this.$nextTick(function(){})在整个视图都渲染完成后进行一些操作,这个过程是可靠的。

总结

这篇文章主要是对Vue异步渲染队列的研究,我们可以看出主要是对于模板性能的优化,所以产生了异步渲染队列的概念,同样产生了Vue.nextTick 的api,我们可以通过api去处理在模板更心之后,或者子组件更i性能后的逻辑。
 

免责声明

本文只是在学习Vue 异步渲染中的一些笔记,文中的资料也会涉及到引用,具体出处不详,商业用途请谨慎转载。

vue为什么要设计成异步队列渲染的更多相关文章

  1. React中this.setState是同步还是异步?为什么要设计成异步?

    在使用react的时候,this.setState为什么是异步呢? 一直以来没有深思这个问题.昨天就此问题搜索了一下. react创始人之一 Dan Abramovgaearon在GitHub上回答了 ...

  2. 基于异步队列的生产者消费者C#并发设计

    继上文<<基于阻塞队列的生产者消费者C#并发设计>>的并发队列版本的并发设计,原文code是基于<<.Net中的并行编程-4.实现高性能异步队列>>修改 ...

  3. 【转】从Vue.js源码看异步更新DOM策略及nextTick

    在使用vue.js的时候,有时候因为一些特定的业务场景,不得不去操作DOM,比如这样: <template> <div> <div ref="test" ...

  4. Vue源码探究-虚拟DOM的渲染

    Vue源码探究-虚拟DOM的渲染 在虚拟节点的实现一篇中,除了知道了 VNode 类的实现之外,还简要地整理了一下DOM渲染的路径.在这一篇中,主要来分析一下两条路径的具体实现代码. 按照创建 Vue ...

  5. vue.js数据可以在页面上渲染成功却总是警告提示某个字段“undefined”未定义

    最近在开发公司的一个后端管理系统,用的是比较流行的vue框架.在开发过程中,总是出现各种各样的报错问题,有警告的,有接口不通的,有自己马虎造成的低级错误的等等,这些错误在一些老司机面前分分钟解决,但今 ...

  6. .Net中的并行编程-4.实现高性能异步队列

    上文<.Net中的并行编程-3.ConcurrentQueue实现与分析>分析了ConcurrentQueue的实现,本章就基于ConcurrentQueue实现一个高性能的异步队列,该队 ...

  7. [js高手之路]javascript腾讯面试题学习封装一个简易的异步队列

    这道js的面试题,是这样的,页面上有一个按钮,一个ul,点击按钮的时候,每隔1秒钟向ul的后面追加一个li, 一共追加10个,li的内容从0开始技术( 0, 1, 2, ....9 ),首先我们用闭包 ...

  8. vue和jQuery嵌套实现异步ajax通信

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  9. 如何设计一个异步Web服务——接口部分

    需求比较简单,提供一个异步Web服务供使用者调用.比如说,某应用程序需要批量地给图片加lomo效果.由于加lomo效果这个操作非常消耗CPU资源,所以我们需要把这个加lomo效果的程序逻辑放到一台单独 ...

随机推荐

  1. 【Linux】【Services】【VersionControl】Git基础概念及使用

    1. 简介 1.1. 版本控制工具: 本地版本控制系统: 集中化版本控制系统:CVS,SVN 分布式版本控制系统: BitKeeper,Git 1.2. 官方网站: https://git-scm.c ...

  2. Xcode中匹配的配置包的存放目录

    /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/DeviceSupport

  3. github单独下载某一个文件夹

    可以借助svn工具进行下载,实现只下载repo下的指定文件夹内容 背景 需要下载这个文件夹下所有内容https://github.com/rabbitmq/rabbitmq-tutorials/tre ...

  4. java通过jdbc连接数据库并更新数据(包括java.util.Date类型数据的更新)

    一.步骤 1.获取Date实例,并通过getTime()方法获得毫秒数: 2.将获取的毫秒数存储到数据库中,注意存储类型为nvarchar(20): 3.读取数据库的毫秒数,作为Date构造方法的参数 ...

  5. Java中方法和类的深入分析

    1.构造方法不能被继承.也就是说子类里没有父类的构造方法.   Java重载根据的是实参和方法形参之间的匹配.自动类型转换也在重载版本的判断中起到了作用.重载的价值在于允许使用通用名称访问相关的方法. ...

  6. Mysql资料 慢查询

    目录 一.简介 二.查询 三.开启 永久配置 临时配置 四.测试 一.简介 MySQL的慢查询,全名是慢查询日志,是MySQL提供的一种日志记录,用来记录在MySQL中响应时间超过阀值的语句. 具体环 ...

  7. Python __new__ 方法解释与使用

    解释 我们通常把 __init__ 称为构造方法,这是从其他语言借鉴过来的术语. 其实,用于构建实例的是特殊方法 __new__:这是个类方法(使用特殊方式处理,因此不必使用 @classmethod ...

  8. SpringCloud Alibaba实战(12:引入Dubbo实现RPC调用)

    源码地址:https://gitee.com/fighter3/eshop-project.git 持续更新中-- 大家好,我是老三,断更了半年,我又滚回来继续写这个系列了,还有人看吗-- 在前面的章 ...

  9. java 多线程:Thread类常用方法:setPriority优先级、interrupt中断标记、suspend暂停与唤醒resume(已过时);daemon守护线程

    常用方法: boolean isAlive() 测试此线程是否存活. boolean isDaemon() 测试此线程是否为守护程序线程. static void sleep?(long millis ...

  10. java 输入输出IO流:标准输入/输出System.in;System.out;System.err;【重定向输入System.setIn(FileinputStream);输出System.setOut(printStream);】

    Java的标准输入输出分别通过System.in和System.out来代表的,在默认情况下它分别代表键盘和显示器,当程序通过System.in来获取输入时,实际上是从键盘读取输入 当程序试图通过 S ...