vue页面渲染是异步的吗
这篇文章主要介绍“vue页面渲染是异步的吗”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“vue页面渲染是异步的吗”文章能帮助大家解决问题。
创新互联是专业的濠江网站建设公司，濠江接单;提供成都网站制作、做网站、外贸营销网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行濠江网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
vue页面渲染是异步的。vue采用的是异步渲染，这样可以提升性能；如果不采用异步更新，在每次更新数据都会对当前组件进行重新渲染，为了性能考虑，Vue会在本轮数据更新后，再去异步更新视图。
vue页面渲染是异步的。
Vue在更新DOM时是异步执行的，只要侦听到数据变化，Vue将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更，如果同一个watcher被多次触发，只会被推入到队列中一次，这种在缓冲时去除重复数据对于避免不必要的计算和DOM操作是非常重要的，然后，在下一个的事件循环tick中，Vue刷新队列并执行实际(已去重的)工作，Vue在内部对异步队列尝试使用原生的Promise.then、MutationObserver和setImmediate，如果执行环境不支持，则会采用setTimeout(fn, 0)代替。
描述
对于Vue为何采用异步渲染，简单来说就是为了提升性能，因为不采用异步更新，在每次更新数据都会对当前组件进行重新渲染，为了性能考虑，Vue会在本轮数据更新后，再去异步更新视图，举个例子，让我们在一个方法内重复更新一个值。
this.msg = 1;
this.msg = 2;
this.msg = 3;
事实上，我们真正想要的其实只是最后一次更新而已，也就是说前三次DOM更新都是可以省略的，我们只需要等所有状态都修改好了之后再进行渲染就可以减少一些性能损耗。
对于渲染方面的问题是很明确的，最终只渲染一次肯定比修改之后即渲染所耗费的性能少，在这里我们还需要考虑一下异步更新队列的相关问题，假设我们现在是进行了相关处理使得每次更新数据只进行一次真实DOM渲染，来让我们考虑异步更新队列的性能优化。
假设这里是同步更新队列，this.msg=1，大致会发生这些事: msg值更新 -> 触发setter -> 触发Watcher的update -> 重新调用 render -> 生成新的vdom -> dom-diff -> dom更新，这里的dom更新并不是渲染(即布局、绘制、合成等一系列步骤)，而是更新内存中的DOM树结构，之后再运行this.msg=2，再重复上述步骤，之后的第3次更新同样会触发相同的流程，等开始渲染的时候，最新的DOM树中确实只会存在更新完成3，从这里来看，前2次对msg的操作以及Vue内部对它的处理都是无用的操作，可以进行优化处理。
如果是异步更新队列，会是下面的情况，运行this.msg=1，并不是立即进行上面的流程，而是将对msg有依赖的Watcher都保存在队列中，该队列可能这样[Watcher1, Watcher2...]，当运行this.msg=2后，同样是将对msg有依赖的Watcher保存到队列中，Vue内部会做去重判断，这次操作后，可以认为队列数据没有发生变化，第3次更新也是上面的过程，当然，你不可能只对msg有操作，你可能对该组件中的另一个属性也有操作，比如this.otherMsg=othermessage，同样会把对otherMsg有依赖的Watcher添加到异步更新队列中，因为有重复判断操作，这个Watcher也只会在队列中存在一次，本次异步任务执行结束后，会进入下一个任务执行流程，其实就是遍历异步更新队列中的每一个Watcher，触发其update，然后进行重新调用render -> new vdom -> dom-diff -> dom更新等流程，但是这种方式和同步更新队列相比，不管操作多少次msg， Vue在内部只会进行一次重新调用真实更新流程，所以，对于异步更新队列不是节省了渲染成本，而是节省了Vue内部计算及DOM树操作的成本，不管采用哪种方式，渲染确实只有一次。
此外，组件内部实际使用VirtualDOM进行渲染，也就是说，组件内部其实是不关心哪个状态发生了变化，它只需要计算一次就可以得知哪些节点需要更新，也就是说，如果更改了N个状态，其实只需要发送一个信号就可以将DOM更新到最新，如果我们更新多个值。
this.msg = 1;
this.age = 2;
this.name = 3;
此处我们分三次修改了三种状态，但其实Vue只会渲染一次，因为VIrtualDOM只需要一次就可以将整个组件的DOM更新到最新，它根本不会关心这个更新的信号到底是从哪个具体的状态发出来的。
而为了达到这个目的，我们需要将渲染操作推迟到所有的状态都修改完成，为了做到这一点只需要将渲染操作推迟到本轮事件循环的最后或者下一轮事件循环，也就是说，只需要在本轮事件循环的最后，等前面更新状态的语句都执行完之后，执行一次渲染操作，它就可以无视前面各种更新状态的语法，无论前面写了多少条更新状态的语句，只在最后渲染一次就可以了。
将渲染推迟到本轮事件循环的最后执行渲染的时机会比推迟到下一轮快很多，所以Vue优先将渲染操作推迟到本轮事件循环的最后，如果执行环境不支持会降级到下一轮，Vue的变化侦测机制(setter)决定了它必然会在每次状态发生变化时都会发出渲染的信号，但Vue会在收到信号之后检查队列中是否已经存在这个任务，保证队列中不会有重复，如果队列中不存在则将渲染操作添加到队列中，之后通过异步的方式延迟执行队列中的所有渲染的操作并清空队列，当同一轮事件循环中反复修改状态时，并不会反复向队列中添加相同的渲染操作，所以我们在使用Vue时，修改状态后更新DOM都是异步的。
当数据变化后会调用notify方法，将watcher遍历，调用update方法通知watcher进行更新，这时候watcher并不会立即去执行，在update中会调用queueWatcher方法将watcher放到了一个队列里，在queueWatcher会根据watcher的进行去重，若多个属性依赖一个watcher，则如果队列中没有该watcher就会将该watcher添加到队列中，然后便会在$nextTick方法的执行队列中加入一个flushSchedulerQueue方法(这个方法将会触发在缓冲队列的所有回调的执行)，然后将$nextTick方法的回调加入$nextTick方法中维护的执行队列，flushSchedulerQueue中开始会触发一个before的方法，其实就是beforeUpdate，然后watcher.run()才开始真正执行watcher，执行完页面就渲染完成，更新完成后会调用updated钩子。
$nextTick
在上文中谈到了对于Vue为何采用异步渲染，假如此时我们有一个需求，需要在页面渲染完成后取得页面的DOM元素，而由于渲染是异步的，我们不能直接在定义的方法中同步取得这个值的，于是就有了vm.$nextTick方法，Vue中$nextTick方法将回调延迟到下次DOM更新循环之后执行，也就是在下次DOM更新循环结束之后执行延迟回调，在修改数据之后立即使用这个方法，能够获取更新后的DOM。简单来说就是当数据更新时，在DOM中渲染完成后，执行回调函数。
通过一个简单的例子来演示$nextTick方法的作用，首先需要知道Vue在更新DOM时是异步执行的，也就是说在更新数据时其不会阻塞代码的执行，直到执行栈中代码执行结束之后，才开始执行异步任务队列的代码，所以在数据更新时，组件不会立即渲染，此时在获取到DOM结构后取得的值依然是旧的值，而在$nextTick方法中设定的回调函数会在组件渲染完成之后执行，取得DOM结构后取得的值便是新的值。
异步机制
官方文档中说明，Vue在更新DOM时是异步执行的，只要侦听到数据变化，Vue将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更，如果同一个watcher被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和DOM操作是非常重要的。然后，在下一个的事件循环tick中，Vue刷新队列并执行实际工作。Vue在内部对异步队列尝试使用原生的Promise.then、MutationObserver和setImmediate，如果执行环境不支持，则会采用 setTimeout(fn, 0)代替。Js是单线程的，其引入了同步阻塞与异步非阻塞的执行模式，在Js异步模式中维护了一个Event Loop，Event Loop是一个执行模型，在不同的地方有不同的实现，浏览器和NodeJS基于不同的技术实现了各自的Event Loop。浏览器的Event Loop是在HTML5的规范中明确定义，NodeJS的Event Loop是基于libuv实现的。
在浏览器中的Event Loop由执行栈Execution Stack、后台线程Background Threads、宏队列Macrotask Queue、微队列Microtask Queue组成。
执行栈就是在主线程执行同步任务的数据结构，函数调用形成了一个由若干帧组成的栈。
后台线程就是浏览器实现对于
setTimeout、setInterval、XMLHttpRequest等等的执行线程。宏队列，一些异步任务的回调会依次进入宏队列，等待后续被调用，包括
setTimeout、setInterval、setImmediate(Node)、requestAnimationFrame、UI rendering、I/O等操作。微队列，另一些异步任务的回调会依次进入微队列，等待后续调用，包括
Promise、process.nextTick(Node)、Object.observe、MutationObserver等操作。
当Js执行时，进行如下流程:
首先将执行栈中代码同步执行，将这些代码中异步任务加入后台线程中。
执行栈中的同步代码执行完毕后，执行栈清空，并开始扫描微队列。
取出微队列队首任务，放入执行栈中执行，此时微队列是进行了出队操作。
当执行栈执行完成后，继续出队微队列任务并执行，直到微队列任务全部执行完毕。
最后一个微队列任务出队并进入执行栈后微队列中任务为空，当执行栈任务完成后，开始扫面微队列为空，继续扫描宏队列任务，宏队列出队，放入执行栈中执行，执行完毕后继续扫描微队列为空则扫描宏队列，出队执行。
不断往复
...。
实例
// Step 1
console.log(1);
// Step 2
setTimeout(() => {
console.log(2);
Promise.resolve().then(() => {
console.log(3);
});
}, 0);
// Step 3
new Promise((resolve, reject) => {
console.log(4);
resolve();
}).then(() => {
console.log(5);
})
// Step 4
setTimeout(() => {
console.log(6);
}, 0);
// Step 5
console.log(7);
// Step N
// ...
// Result
/*
1
4
7
5
2
3
6
*/
Step 1
// 执行栈 console
// 微队列 []
// 宏队列 []
console.log(1); // 1
Step 2
// 执行栈 setTimeout
// 微队列 []
// 宏队列 [setTimeout1]
setTimeout(() => {
console.log(2);
Promise.resolve().then(() => {
console.log(3);
});
}, 0);
Step 3
// 执行栈 Promise
// 微队列 [then1]
// 宏队列 [setTimeout1]
new Promise((resolve, reject) => {
console.log(4); // 4 // Promise是个函数对象，此处是同步执行的 // 执行栈 Promise console
resolve();
}).then(() => {
console.log(5);
})
Step 4
// 执行栈 setTimeout
// 微队列 [then1]
// 宏队列 [setTimeout1 setTimeout2]
setTimeout(() => {
console.log(6);
}, 0);
Step 5
// 执行栈 console
// 微队列 [then1]
// 宏队列 [setTimeout1 setTimeout2]
console.log(7); // 7
Step 6
// 执行栈 then1
// 微队列 []
// 宏队列 [setTimeout1 setTimeout2]
console.log(5); // 5
Step 7
// 执行栈 setTimeout1
// 微队列 [then2]
// 宏队列 [setTimeout2]
console.log(2); // 2
Promise.resolve().then(() => {
console.log(3);
});
Step 8
// 执行栈 then2
// 微队列 []
// 宏队列 [setTimeout2]
console.log(3); // 3
Step 9
// 执行栈 setTimeout2
// 微队列 []
// 宏队列 []
console.log(6); // 6
分析
在了解异步任务的执行队列后，回到中$nextTick方法，当用户数据更新时，Vue将会维护一个缓冲队列，对于所有的更新数据将要进行的组件渲染与DOM操作进行一定的策略处理后加入缓冲队列，然后便会在$nextTick方法的执行队列中加入一个flushSchedulerQueue方法(这个方法将会触发在缓冲队列的所有回调的执行)，然后将$nextTick方法的回调加入$nextTick方法中维护的执行队列，在异步挂载的执行队列触发时就会首先会首先执行flushSchedulerQueue方法来处理DOM渲染的任务，然后再去执行$nextTick方法构建的任务，这样就可以实现在$nextTick方法中取得已渲染完成的DOM结构。在测试的过程中发现了一个很有意思的现象，在上述例子中的加入两个按钮，在点击updateMsg按钮的结果是3 2 1，点击updateMsgTest按钮的运行结果是2 3 1。
