第十八节:Vue3难点用法剖析(nextTick、xxx 等等)(Section 18: vue3 difficult usage analysis (nexttick, XXX, etc.))

一. nextTick用法剖析

(之前的文章参考:https://www.cnblogs.com/yaopengfei/p/15464339.html)

1. 含义

    function nextTick(callback?: () => void): Promise<void>

    等待下一次 DOM 更新刷新的工具方法。

2. 详细说明

    当你在 Vue 中更改响应式状态时,最终的 DOM 更新并不是同步生效的,而是由 Vue 将它们缓存到“next tick”以确保每个组件无论发生多少状态改变,都仅执行一次更新。

    nextTick() 可以在状态改变后立即使用,以等待 DOM 更新完成。(换言之:执行完nextTick后,Dom元素更新完毕)

3. 用法  

    (1).你可以传递一个回调函数作为参数,

    (2). await 返回的 Promise。 即:await nextTick();

    总之:凡是涉及到对Dom元素的调用,就要思考一下是否需要采用nextTick

4. 案例剖析

以【自增案例】来说明,

    (1).思路1剖析:执行到debugger代码,这个时候看一下页面中的dom,发现还是0,继续走完 await nextTick,返现页面中的dom变成1了

    (2).思路2: 如果方法里只有 count.value++ 代码,没有后续的代码,继续在count.value++加一个debugger代码,调试发现,走完count.value++, 页面中的dom元素还是没有更新的, 继续走完方法,通过源码调试还需要走一堆代码,然后dom才更新了。

代码分享:

<template>
	<button id="counter" @click="increment">{{ count }}</button>
</template>

<script setup>
import { ref, nextTick } from "vue";
const count = ref(0);
const increment = async () => {
	// 原始值 0
	console.log("原始值:" + document.getElementById("counter").textContent);
	// 执行递增操作
	count.value++;

	// debugger;

	// 递增后的值,发现没有变,还是0
	console.log("递增后的值:" + document.getElementById("counter").textContent);

	await nextTick();

	// nextTick后的值,发现变了,是1
	console.log("递增后的值:" + document.getElementById("counter").textContent);

	// 写法2--在回调中调用
	// nextTick(() => {
	// 	console.log(
	// 		"递增后的值:" + document.getElementById("counter").textContent
	// 	);
	// });
};
</script>

5. 项目中的案例剖析

(1). 打开弹窗后的聚焦,比如:用户新增页面

     需要写在nextTick中, 因为弹框中 el-input元素,需要通过v-model绑定值, value值需要响应式更新,那么自身dom的更新就会被缓存在 “next tick”中

(2). 初始化initTableColumn表格显示列的时候需要调用

     清空数据后,肯定要nextTick让页面生效后,再次调用赋值才会生效   

6. await+promise原理剖析

  (详见:https://www.cnblogs.com/yaopengfei/p/16118744.html)

  await后面跟一个Promise表达式, await会等到Promise的状态变成fulfilled状态(resolved),之后继续执行后面的代码;

二. xxx

三. xxx

!

  • 作       者 : Yaopengfei(姚鹏飞)
  • 博客地址 : http://www.cnblogs.com/yaopengfei/
  • 声     明1 : 如有错误,欢迎讨论,请勿谩骂^_^。
  • 声     明2 : 原创博客请在转载时保留原文链接或在文章开头加上本人博客地址,否则保留追究法律责任的权利。
————————

I Analysis of nexttick usage

(reference to previous articles: https://www.cnblogs.com/yaopengfei/p/15464339.html )

1. Meaning < / strong >

    function nextTick(callback?: () => void): Promise<void>

Tools and methods that wait for the next DOM update refresh.

2. Detailed description < / strong >

When you change the responsive state in Vue, the final DOM updates do not take effect synchronously, but Vue caches them in “next tick” to ensure that each component performs only one update no matter how many state changes occur.

Nexttick () can be used immediately after the state changes to wait for the DOM update to complete< Strong > (in other words, after nexttick is executed, the DOM element is updated) < / strong >

3. Usage < / strong >

(1). You can pass a callback function as an argument,

(2). Promise returned by await. Namely: await nexttick();

In short: when it comes to calling DOM elements, we should think about whether nexttick needs to be adopted

4. Case analysis < / strong >

Take [self increasing case] as an example,

    (1). Analysis of idea 1: when the debugger code is executed, look at the DOM in the page and find that it is still 0. Continue to walk await nexttick, and the DOM in the return page becomes 1 < / strong >

    (2). Idea 2: if there is only count in the method Value + + code, no subsequent code, continue in count Value + + add a debugger code, debug and find, and finish count Value + +, the DOM element in the page has not been updated. Continue to complete the method. Through the source code debugging, you still need to go through a pile of code, and then the DOM is updated

< strong > code sharing: < / strong >

<template>
	<button id="counter" @click="increment">{{ count }}</button>
</template>

<script setup>
import { ref, nextTick } from "vue";
const count = ref(0);
const increment = async () => {
	// 原始值 0
	console.log("原始值:" + document.getElementById("counter").textContent);
	// 执行递增操作
	count.value++;

	// debugger;

	// 递增后的值,发现没有变,还是0
	console.log("递增后的值:" + document.getElementById("counter").textContent);

	await nextTick();

	// nextTick后的值,发现变了,是1
	console.log("递增后的值:" + document.getElementById("counter").textContent);

	// 写法2--在回调中调用
	// nextTick(() => {
	// 	console.log(
	// 		"递增后的值:" + document.getElementById("counter").textContent
	// 	);
	// });
};
</script>

5. Case analysis in the project < / strong >

(1). The focus after opening the pop-up window, such as the user’s new page

It needs to be written in nexttick, because the El input element in the pop-up box needs to bind the value through V-model, and the value value needs to be updated responsively, so the update of its own DOM will be cached in “next tick”

(2). Called when initializing the display column of the inittablecolumn table

After clearing the data, make sure nexttick makes the page take effect, and then call the assignment again to take effect

6. await+promise原理剖析

  (详见:https://www.cnblogs.com/yaopengfei/p/16118744.html)

Await is followed by a promise expression. Await will wait until the promise state becomes fully resolved, and then continue to execute the following code;

II  xxx

III  xxx

!

  • 作       者 : Yaopengfei(姚鹏飞)
  • 博客地址 : http://www.cnblogs.com/yaopengfei/
  • Sheng Ming 1: if there is any error, welcome to discuss, do not abuse ^ ^ ^.
  • Shengming 2: please keep the original link or add your blog address at the beginning of the article when reprinting the original blog, otherwise you reserve the right to investigate legal responsibility.