第十八節:Vue3難點用法剖析(nextTick、xxx 等等)

一. 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 : 原創博客請在轉載時保留原文鏈接或在文章開頭加上本人博客地址,否則保留追究法律責任的權利。
 
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章