This article mainly introduces the source code analysis of the nextTick function in Vue. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.
1. What is Vue.nextTick()?
The official document explains as follows:
A delayed callback executed after the next DOM update cycle ends. Use this method immediately after modifying the data to get the updated DOM.
2. Why use nextTick?
<!DOCTYPE html>
<html>
<head>
<title>演示Vue</title>
<script src="https://tugenhua0707.github.io/vue/vue1/vue.js"></script>
</head>
<body>
<p id="app">
<template>
<p ref="list">
{{name}}
</p>
</template>
</p>
<script>
new Vue({
el: '#app',
data: {
name: 'aa'
},
mounted() {
this.updateData();
},
methods: {
updateData() {
var self = this;
this.name = 'bb';
console.log(this.$el.textContent); // aa
this.$nextTick(function(){
console.log(self.$el.textContent); // bb
});
}
}
});
</script>
</body>
</html>The above code displays bb on the page view, but when I log in to the console When printing, the text content obtained is still aa, but after using nextTick, the text content obtained is the latest content bb, so in this case, we can use the nextTick function.
Why does the above code change this.name = 'bb'; and then use console.log(this.$el.textContent); to print the value still aa? That's because after setting the value of name, the DOM has not been updated, so the obtained value is still the previous value. However, when we put it in the nextTick function, the code will be executed after the DOM is updated, so after the DOM is updated, the element is obtained again. The latest value can be obtained.
Understand DOM updates: In VUE, when we modify a value in the data, it will not be immediately reflected in the el. Vue will put the changed data into an asynchronous queue of the watcher. , the watcher queue task will only be executed when the current task is idle, which has a delay time, so after placing it in the nextTick function, the latest value of the el can be obtained. It is also possible if we change the nextTick above to setTimeout.
3. Detailed explanation of Vue source code nextTick (the source code is in vue/src/core/util/env.js)
Before understanding the nextTick source code, let’s understand it first The following is the new MutationObserver API in HTML5. Its function is to monitor DOM changes. It can monitor the deletion of child nodes, attribute modifications, text content modifications, etc. of a DOM object.
nextTick source code is as follows:
export const nextTick = (function () {
const callbacks = []
let pending = false
let timerFunc
function nextTickHandler () {
pending = false;
/*
之所以要slice复制一份出来是因为有的cb执行过程中又会往callbacks中加入内容，比如$nextTick的回调函数里又有$nextTick，
那么这些应该放入到下一个轮次的nextTick去执行，所以拷贝一份，遍历完成即可，防止一直循环下去。
*/
const copies = callbacks.slice(0)
callbacks.length = 0
for (let i = 0; i < copies.length; i++) {
copies[i]()
}
}
// the nextTick behavior leverages the microtask queue, which can be accessed
// via either native Promise.then or MutationObserver.
// MutationObserver has wider support, however it is seriously bugged in
// UIWebView in iOS >= 9.3.3 when triggered in touch event handlers. It
// completely stops working after triggering a few times... so, if native
// Promise is available, we will use it:
/* istanbul ignore if */
/*
nextTick行为利用了microtask队列, 先使用 Promise.resolve().then(nextTickHandler)来将异步回调
放入到microtask中，Promise 和 MutationObserver都可以使用，但是 MutationObserver 在IOS9.3以上的
WebView中有bug，因此如果满足第一项的话就可以执行，如果没有原生Promise就用 MutationObserver。
*/
if (typeof Promise !== 'undefined' && isNative(Promise)) {
var p = Promise.resolve()
var logError = err => { console.error(err) }
timerFunc = () => {
p.then(nextTickHandler).catch(logError)
// in problematic UIWebViews, Promise.then doesn't completely break, but
// it can get stuck in a weird state where callbacks are pushed into the
// microtask queue but the queue isn't being flushed, until the browser
// needs to do some other work, e.g. handle a timer. Therefore we can
// "force" the microtask queue to be flushed by adding an empty timer.
if (isIOS) setTimeout(noop)
}
} else if (typeof MutationObserver !== 'undefined' && (
isNative(MutationObserver) ||
// PhantomJS and iOS 7.x
MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {
// use MutationObserver where native Promise is not available,
// e.g. PhantomJS IE11, iOS7, Android 4.4
/*
创建一个MutationObserver，observe监听到DOM改动之后执行的回调 nextTickHandler
*/
var counter = 1
var observer = new MutationObserver(nextTickHandler)
var textNode = document.createTextNode(String(counter));
// 使用MutationObserver的接口，监听文本节点的字符内容
observer.observe(textNode, {
characterData: true
});
/*
每次执行timerFunc函数都会让文本节点的内容在0/1之间切换，切换之后将新赋值到那个我们MutationObserver监听的文本节点上去。
*/
timerFunc = () => {
counter = (counter + 1) % 2
textNode.data = String(counter)
}
} else {
// fallback to setTimeout
/*
如果上面的两种都不支持的话，我们就使用setTimeout来执行
*/
timerFunc = () => {
setTimeout(nextTickHandler, 0)
}
}
return function queueNextTick (cb?: Function, ctx?: Object) {
let _resolve
callbacks.push(() => {
if (cb) {
try {
cb.call(ctx)
} catch (e) {
handleError(e, ctx, 'nextTick')
}
} else if (_resolve) {
_resolve(ctx)
}
});
/* 如果pending为true，表明本轮事件循环中已经执行过 timerFunc(nextTickHandler, 0) */
if (!pending) {
pending = true
timerFunc()
}
if (!cb && typeof Promise !== 'undefined') {
return new Promise((resolve, reject) => {
_resolve = resolve
})
}
}
})()Understanding of the overall idea: First, nextTick is a closure function, and the code is executed immediately, before understanding the overall code , let’s first look at a similar demo, the following code:
<!DOCTYPE html>
<html>
<head>
<title>演示Vue</title>
</head>
<body>
<p id="app">
</p>
<script>
var nextTick = (function(){
return function queueNextTick(cb, ctx) {
if (cb) {
try {
cb.call(ctx)
} catch (e) {
console.log('出错了');
}
}
}
})();
// 方法调用
nextTick(function(){
console.log(2); // 打印2
})
</script>
</body>
</html>The demo code is very similar to the above code.
We can also extract and use nextTick to make demo code as follows:
var nextTick2 = (function(){
const callbacks = [];
let pending = false;
let timerFunc;
function nextTickHandler () {
pending = false
const copies = callbacks.slice(0)
callbacks.length = 0
for (let i = 0; i < copies.length; i++) {
copies[i]()
}
}
if (typeof Promise !== 'undefined') {
var p = Promise.resolve()
var logError = err => { console.error(err) }
timerFunc = () => {
p.then(nextTickHandler).catch(logError)
}
} else if (typeof MutationObserver !== 'undefined' ||
// PhantomJS and iOS 7.x
MutationObserver.toString() === '[object MutationObserverConstructor]'
) {
// use MutationObserver where native Promise is not available,
// e.g. PhantomJS IE11, iOS7, Android 4.4
var counter = 1
var observer = new MutationObserver(nextTickHandler)
var textNode = document.createTextNode(String(counter))
observer.observe(textNode, {
characterData: true
})
timerFunc = () => {
counter = (counter + 1) % 2
textNode.data = String(counter)
}
} else {
// fallback to setTimeout
/* istanbul ignore next */
timerFunc = () => {
setTimeout(nextTickHandler, 0)
}
}
return function queueNextTick (cb, ctx) {
let _resolve
callbacks.push(() => {
if (cb) {
try {
cb.call(ctx)
} catch (e) {
handleError(e, ctx, 'nextTick')
}
} else if (_resolve) {
_resolve(ctx)
}
})
if (!pending) {
pending = true
timerFunc()
}
if (!cb && typeof Promise !== 'undefined') {
return new Promise((resolve, reject) => {
_resolve = resolve
})
}
}
})();
nextTick2(function(){
console.log(2222);
});The above code is extracted from the nextTick source code, for better I understand nextTick and made the above demo.
Let’s understand the meaning of the overall code;
First define the array callbacks = []; to store all callback functions that need to be executed, and define let pending = false ; Determine whether the timerFunc(nextTickHandler, 0) function has been executed in this round of events. If it is true, it means that the timeFunc function has been executed. Then define the nextTickHandler function. The function of this function is to traverse the functions saved in the array callbacks in sequence and execute them in sequence;
Please see the source code as follows:
function nextTickHandler () {
pending = false
const copies = callbacks.slice(0)
callbacks.length = 0
for (let i = 0; i < copies.length; i++) {
copies[i]()
}
}Then there are three judgments, the code is as follows:
if (typeof Promise !== 'undefined' && isNative(Promise)) {
var p = Promise.resolve();
var logError = err => { console.error(err) }
timerFunc = () => {
p.then(nextTickHandler).catch(logError);
} else if (typeof MutationObserver !== 'undefined' && (
isNative(MutationObserver) ||
// PhantomJS and iOS 7.x
MutationObserver.toString() === '[object MutationObserverConstructor]'
)){
var counter = 1
var observer = new MutationObserver(nextTickHandler)
var textNode = document.createTextNode(String(counter))
observer.observe(textNode, {
characterData: true
})
timerFunc = () => {
counter = (counter + 1) % 2
textNode.data = String(counter)
}
} else {
timerFunc = () => {
setTimeout(nextTickHandler, 0)
}
} First determine whether the Promise object is supported. If so, define the timeFunc() function to prepare for the next call. Then continue to determine whether the object MutationObserver is supported. If so, create a text node and monitor the node data. Whether it has changed. If so, call the timerFunc function and the counter value will switch between 0/1. If the value changes, assign the data value to the data attribute. Then if the data attribute changes, it will be re-rendered. page (because vue monitors whether the property value changes through Object.defineProperty), if the above two conditions are not satisfied, then directly use setTimeout to execute the nextTickHandler function;
Finally nextTick code Return a function, the code is as follows:
return function queueNextTick (cb?: Function, ctx?: Object) {
let _resolve
callbacks.push(() => {
if (cb) {
try {
cb.call(ctx)
} catch (e) {
handleError(e, ctx, 'nextTick')
}
} else if (_resolve) {
_resolve(ctx)
}
})
if (!pending) {
pending = true
timerFunc()
}
if (!cb && typeof Promise !== 'undefined') {
return new Promise((resolve, reject) => {
_resolve = resolve
})
}
}The meaning of the code is: whether the incoming cb is a function, whether the ctx parameter is an object, if cb is a function, Using cb.call(ctx), if timerFunc has not been executed, then pending is false, so the timerFunc() function is executed. The basic idea is this.
Related recommendations:
A brief analysis of the implementation method of Vue.nextTick
process in Node.js .nextTick usage example
Difference analysis of timer nextTick() and setImmediate() in node.js_node.js
The above is the detailed content of Detailed explanation of nextTick function source code in Vue. For more information, please follow other related articles on the PHP Chinese website!
Vue.nextTick函数用法详解及在异步更新中的应用Jul 26, 2023 am 08:57 AMVue.nextTick函数用法详解及在异步更新中的应用在Vue开发中，经常会遇到需要进行异步更新数据的情况，比如在修改DOM后需要立即更新数据或者在数据更新后需要立即进行相关操作。而Vue提供的.nextTick函数就是为了解决这类问题而出现的。本文就会详细介绍Vue.nextTick函数的用法，并结合代码示例来说明它在异步更新中的应用。一、Vue.nex
Django框架中的缓存机制详解Jun 18, 2023 pm 01:14 PM在Web应用程序中，缓存通常是用来优化性能的重要手段。Django作为一款著名的Web框架，自然也提供了完善的缓存机制来帮助开发者进一步提高应用程序的性能。本文将对Django框架中的缓存机制进行详解，包括缓存的使用场景、建议的缓存策略、缓存的实现方式和使用方法等方面。希望对Django开发者或对缓存机制感兴趣的读者有所帮助。一、缓存的使用场景缓存的使用场景
php-fpm调优方法详解Jul 08, 2023 pm 04:31 PMPHP-FPM是一种常用的PHP进程管理器，用于提供更好的PHP性能和稳定性。然而，在高负载环境下，PHP-FPM的默认配置可能无法满足需求，因此我们需要对其进行调优。本文将详细介绍PHP-FPM的调优方法，并给出一些代码示例。一、增加进程数默认情况下，PHP-FPM只启动少量的进程来处理请求。在高负载环境下，我们可以通过增加进程数来提高PHP-FPM的并发
Vue3中的nextTick函数详解：处理DOM更新后的操作Jun 18, 2023 am 09:30 AM随着前端技术的迅猛发展，现代化的前端框架层出不穷，Vue.js就是其中的佼佼者。Vue.js是一个渐进式JavaScript框架，具有易学、高效和灵活的特点，是构建交互式Web界面的理想选择。Vue.js3是Vue.js的最新版本，它通过一系列持续性能提升、架构重构和改进开发体验等优点，进一步提高了Vue.js的优越性。其中，nextTick函数是Vue.
PHP function_exists()函数用法详解Jun 27, 2023 am 10:32 AM在PHP开发中，有时我们需要判断某个函数是否可用，这时我们便可以使用function_exists()函数。本文将详细介绍function_exists()函数的用法。一、什么是function_exists()函数？function_exists()函数是PHP自带的一个内置函数，用于判断某个函数是否被定义。该函数返回一个布尔值，如果函数存在返回True，
PHP strpos()函数用法详解Jun 27, 2023 am 10:43 AMPHPstrpos()函数用法详解在PHP编程中，字符串处理是非常重要的一部分。PHP通过提供一些内置函数来实现字符串处理。其中，strpos()函数就是PHP中最常用的一个字符串函数之一。该函数的目的是在一个指定的字符串中搜索另一个指定字符串的位置，如果包含则返回这个位置，否则返回false。本文将通过详细分析PHPstrpos()函数的用法，助你更好
Vue3组件异步更新和nextTick运行机制源码分析May 16, 2023 am 10:01 AM组件的异步更新我们应该都知道或者听说过组件的更新是异步的，对于nextTick我们也知道它是利用promise将传入的回调函数放入微任务队列中，在函数更新完以后执行，那么既然都是异步更新，nextTick是怎么保证回调会在组件更新后执行，其插入队列的时机又是什么时候？带着这些问题我们去源码中寻找答案。先回顾一下组件更新的effect：consteffect=(instance.effect=newReactiveEffect(componentUpdateFn,()=>queueJob(u
Gin框架的模板渲染功能详解Jun 22, 2023 pm 10:37 PMGin框架是目前非常流行的Go语言Web框架之一。作为一个轻量级的框架，Gin提供了丰富的功能和灵活的架构，使得它在Web开发领域中备受欢迎。其中一个特别重要的功能是模板渲染。在本文中，我们将介绍Gin框架的模板渲染功能，并深入了解它的实现原理。一、Gin框架的模板渲染功能Gin框架使用了多种模板渲染引擎来构建Web应用程序。目前，它支持以下几种模板引擎：
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.
Atom editor mac version download
The most popular open source editor
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.
