面试官问我new Vue阶段做了什么？_new vue()做了什么(1)

整个new Vue阶段做了什么？

我们习以为常的用Vue开发，但可能很少会去关注new Vue帮我们做了什么事情。面试中我们怎么去回答比较好，我个人觉得可以从以下五个方面去回答这个面试题😁。

• init初始化
• mount挂载
• compiler编译
• render渲染
• patch补丁

二、回

第一

执行init操作。包括且不限制initLifecycle、initState等。

第二

执行mount。进行元素挂载。

追问：实例挂载的过程中发生了什么?

🙋面试官可能会追问你，挂载阶段，他是怎么进行挂载的，该过程中做了什么事情？

分析

🙋🏻‍♂️老规矩，先进行分析。

挂载过程完成了最重要的两件事：

• 初始化
• 建立更新机制

回：

• 挂载过程指的是app.mount()过程，这个过程中整体上做了两件事：初始化和建立更新机制。
• 初始化会创建组件实例、初始化组件状态，创建各种响应式数据。
• 建立更新机制这一步会立即执行一次组件更新函数，这会首次执行组件渲染函数并执行patch将前面获得vnode转换为dom；同时首次执行渲染函数会创建它内部响应式数据之间和组件更新函数之间的依赖关系，这使得以后数据变化时会执行对应的更新函数。

第三

compiler步骤在runtime-only版本中没有。

• compiler步骤对template属性进行编译，生成render函数。
• 一般在项目中是在.vue文件开发，通过vue-loader处理生成render函数。

PS：关于loader，后续会出篇文章，尽量会讲详细一点。

第四

执行render。生成vnode。

• render例子，如下<divid="app">{{ message }}</div>
• 对应手写的render函数

render (h) {
  return h('div', {
     attrs: {
        id: 'app'
      },
  }, this.message)
}
复制代码

追问：从 template 到 render 处理过程，可以讲一下吗？

🙋面试官可能会追问你，模板到渲染，是怎么处理的，该过程中做了什么事情？

分析

🙋🏻‍♂️问我们template到render过程，其实是问vue编译器工作原理。

• 引入vue编译器概念
• 说明编译器的必要性
• 阐述编译器工作流程

回：

• Vue中有个独特的编译器模块，称为“compiler”，它的主要作用是将用户编写的template编译为js中可执行的render函数。
• 之所以需要这个编译过程是为了便于前端程序员能高效的编写视图模板。相比而言，我们还是更愿意用HTML来编写视图，直观且高效。手写render函数不仅效率低下，而且失去了编译期的优化能力。
• 在Vue中编译器会先对template进行解析，这一步称为parse，结束之后会得到一个JS对象，我们成为抽象语法树AST，然后是对AST进行深加工的转换过程，这一步成为transform，最后将前面得到的AST生成为JS代码，也就是render函数。

第五

patch。新旧vnode经过diff后，渲染到真实dom上

对象篇

模块化编程-自研模块加载器

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】