Vue3生命周期

109 阅读1分钟

生命周期图:

F7D68716-3624-42B3-B0C4-5C1516C5ACD5.jpeg

  • 其中,虚拟 DOM 是一种编程概念,目的是将目标所需的 UI 通过数据结构“虚拟”地表示出来,保存在内存中,然后将真实的 DOM 与之保持同步。虚拟 DOM 带来的主要收益是它让开发者能够灵活、声明式地创建、检查和组合所需 UI 的结构,同时只需把具体的 DOM 操作留给渲染器去处理。
  • 一个运行时runtime渲染器将会遍历整个虚拟DOM树,以此构建真实的DOM树,该过程为挂载 mount
  • 如果有两份虚拟DOM,渲染器将会比较地遍历它们,找出区别,并应用变化到真实的DOM上
  • DOM的更新并不是同步的,Vue将缓冲更改的状态直到更新周期的下个时机(确保无论你进行了几次声明更改,每个组件都只需要更新一次)
  • 可以使用nextTick()来访问某个状态改变后、更新完成的DOM

编译-挂载-更新:

9CAD0283-DBC2-4EB0-816A-68C17CF324CC.jpeg