nextick的使用

vue官网文档是这样解释这个API的：等待下一次DOM刷新的工具。

这句话的解释是：vue本身是异步渲染的，当数据更新时，DOM并不会及时更新，而是会放在一个队列里，等待下一次"tick"，然后一起执行。

nextTick的使用

当我们想要获取下一次更新时的DOM，就可以使用nextTick。可以传递一个回调函数作为参数，或者直接使用await

<div id="app">
        <button id="counter" @click="increment">{{message}}</button>
</div>
    
    <script>
        const { createApp, ref, nextTick } = Vue

        const App = createApp({
            setup() {
                const message = ref("你好");
                async function increment() {
                    message.value = "暴富暴富"

                    // DOM 还未更新
                    console.log(document.getElementById('counter').textContent,"前") 

                    await nextTick()
                    // DOM 此时已经更新
                    console.log(document.getElementById('counter').textContent,"后") 
                }
                  // function increment() {
                //     message.value = "暴富暴富"

                //     // DOM 还未更新
                //     console.log(document.getElementById('counter').textContent, "前")
                //     nextTick(() => {

                //         // DOM 此时已经更新
                //         console.log(document.getElementById('counter').textContent, "后")
                //     })

                // }
                return {
                    message,
                    increment
                }

            }
        })
        App.mount("#app")

nextTick原理

当我们在控制台打印nexttick这个API

 console.log(nextTick())//vue3写法

我们能得到这样一个结果：

nextTick本身会返回一个Pomise对象，等待主进程运行完成后运行