vue-$nextTick() 沒有獲取到DOM

問題說明

沒有輸出 labelList 更新后的所有 li 節點

<ul>
    <li v-for="label in labelList">{{label}}</li>
</ul>
<script>
    data：{labelList:[1,2,3]}
    mounted:{
     this.labelList = [2,3,4,5]
     this.$nextTick(()=>{
        // 輸出li標簽 => 三個li標簽
      })
    }
</script>

解決辦法

this.$nextTick(()=>{
    setTimeout(()=>{
        // 輸出li標簽 => 四個li標簽
    },0)
})

原理解釋

官網文檔上寫明在下次 DOM 更新循環結束之后執行延遲回調。在修改數據之后立即使用這個方法，獲取更新后的 DOM，也就是說

if(newList.length > oldList.length){
  because: 多出來的 li 標簽不在 vue 監控范圍內
  so: 輸出不出來
}

也就是說： nextTick 是在 已有的DOM更新循環以后執行的，你新生成的 DOM 是新生成的，不是在原來的 DOM 上更新的

至於 setTimeout 以后就獲取到想要的結果了，可能是因為異步同步之類的原因，目前知識儲備不足，無法直白地解釋，暫不寫
PS: if( 儲備到這些知識 && 想起來這個坑){補一補}