什麼是nextTick()？

官方定義

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM

實際應用場景

版主在Vue3的 project中有一個child componet 跟 parent component，在child component中有使用 Primevue的 Checkbox，而我希望在勾選Checkbox時可以觸發emit，所以使用watch監聽Checkbox 綁定的一個ref的變數，所以在watch監聽該變數，當有變化就發出emit，而parent收到emit的會依照回傳的值做一些array的過濾，在這裡因為過濾會花點時間。

於此同時Checkbox不會馬上被改變打勾或是非打勾的狀態，需要等到parent計算完才會被更新DOM，所以我認為是parent中的filter造成DOM的延遲更新，所以就使用nextTick()，先讓Checkbox可以先被渲染，再執行emit。

程式碼如下

watch(destination, () => {
    nextTick(()=> {
        emit('filterCondiction', {date: [{index: '1', date: "20240201"}], location: [{index: props.airport.location.split(' ')[1], destination: destination.value}]});
    });
})

請忽略傳遞的參數ＸＤ

在這裡會看到emit會在DOM完成更新後才執行，這樣就不會有覺得為什麼點擊Chenckbox後卻沒有馬上被打勾的問題。