$nextTick与dom渲染时机的先后问题

Question

$nextTick是微任务，微任务的执行是在DOM渲染前的;
视频中说经过验证$nextTick是在DOM渲染后触发的；
没搞明白呢

Answer 1

双越 2021-03-17 08:43:04

<ul id="ul1">
    <li>100</li>
    <li>200</li>
    <li>300</li>
</ul>

<script>
    const ul1 = document.getElementById('ul1')
    alert(ul1.children.length) // 3
    
    const newLi = document.createElement('li')
    newLi.innerHTML = '400'
    ul1.appendChild(newLi)
    
    Promise.resolve().then(() => {
        alert(ul1.children.length) // 4
    })
</script>

先看看上面的示例。

微任务的 callback 中也可以拿到最新的 DOM 结果，即渲染之后的结果。这一点微任务和宏任务是一样的。

但是，注意，此时页面上还没有渲染出 <li>400</li> ，仅仅是通过 js 代码能拿到而已。这一点和宏任务不一样。

关于异步的内容，推荐你了解一下我做的 https://coding.imooc.com/class/400.html 《前端一面》这门课程。看看第 8 章的目录，异步进阶。

• 慕运维0297670 #1

  老师，组件更新函数和手动写的nextTick 回调相比，是不是更新组件优先级更高？这样才能保证nextTick 拿到的是最新的DOM

• 双越 回复 慕运维0297670 #2

  不能说优先级更高，应该说：组件 updated 会先于 $nextTick 执行