一. 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 : 原創博客請在轉載時保留原文鏈接或在文章開頭加上本人博客地址,否則保留追究法律責任的權利。