Vue：手动修改DOM与虚拟DOM更新谁优先级更高？nextTick Demo疑问

为什么$nextTick回调中DOM内容仍是30？ #

从代码逻辑来看，预期和实际结果的差异大概率是测试中的误解或操作失误，按照Vue2的更新机制，正确结果应该是$nextTick回调中打印出4。具体执行流程如下：

1. 你手动设置dom.textContent = '30'，直接修改了真实DOM，但此时Vue维护的虚拟DOM中该节点的文本值还是初始的1。
2. 三次this.msg++会被Vue合并为一次更新（同一事件循环内的多次数据变更会被批量处理），最终msg变为4，Vue将这次更新任务加入异步队列。
3. 当前同步代码执行完毕后，进入微任务阶段：
   • 先执行Vue的异步更新：对比虚拟DOM的旧值（1）和新值（4），发现差异后直接将真实DOM的textContent覆盖为4。
   • 再执行$nextTick回调，此时打印的内容应该是4。

如果你的实际结果确实是30，建议检查是否存在操作失误（比如重复点击、控制台输出混淆），或者运行环境的特殊兼容问题。

手动修改DOM与Vue虚拟DOM更新的关系 #

不存在谁优先级更高的说法，核心规则是：Vue完全掌控它渲染生成的DOM节点：

• 对于模板中声明的DOM节点，Vue会维护对应的虚拟DOM副本。当数据变化时，Vue会直接根据虚拟DOM的差异更新真实DOM，完全忽略你之前手动修改的内容——你的手动修改会被Vue的更新覆盖。
• 如果你需要手动修改DOM且不想被Vue覆盖，有几种方案：
  • 把该节点从Vue的模板中剥离，手动控制其生命周期。
  • 使用Vue的自定义指令，在Vue的更新周期中插入你的手动修改逻辑。
  • 在$nextTick中执行手动修改，确保在Vue完成DOM更新后再操作。

内容的提问来源于stack exchange，提问作者howie