Vue 初始渲染流程 你理解了吗?

要点

• 面试中有大量的题型和它高度相关

• $mount()

• render()

• updateComponent()

• 渲染 Watcher

• patch()

例子

• 聊一聊 Vue 中是如何渲染 DOM 的? new Vue() 的过程, 页面是如何挂载的?

  • 这是一个很庞大的工程, 整个过程很繁杂, 大概分为: 虚拟 DOM / render 函数 / 渲染 Watcher / patch 函数 / diff 算法这些要点

  • 我们平时写的 template 都是虚拟 DOM, 在 template 中的代码要渲染到网页, 需要交给 Vue 来进行转换, 内部会将其转换成 render() 函数

  • 触发 beforeMount 的执行

  • 创建渲染 Watcher, 进行页面的渲染, 会触发 _update() 和 _render() 函数, render 函数主要是用来创建虚拟 DOM 对象的, update 函数是调用 patch 函数, 将我们创建的虚拟 DOM 批量创建成真实 DOM, 渲染到网页中

  • 以上就是页面渲染的完整流程, 如果数据更新, 渲染 Watcher 会自动调用 update 方法重复最后一个环节的操作, 此时还会触发 beforeUpdate 和 updated 钩子

• 聊一聊虚拟 DOM? 你对虚拟 DOM 是怎么理解的?

  • 好处: 提高渲染性能 / 跨平台

  • Web 中的真实 DOM 无法在其他平台中使用, 而虚拟 DOM 就是对真实 DOM 的抽象描述, 所以可以移植到任意平台