面试官问我new Vue阶段做了什么？

前言

• 本篇录入吊打面试官专栏，希望能祝君拿下Offer一臂之力，各位看官感兴趣可移步🚶。
• 这段时间面了很多家公司，被问到的题我感觉不重复不止100道，将会挑选觉得常见且有意义的题目进行分析及回答。
• 有人说面试造火箭，进去拧螺丝；其实个人觉得问的问题是项目中涉及的点 || 热门的技术栈都是很好的面试体验，不要是旁门左道冷门的知识，实际上并不会用到的。
• 请问Vue中的的new Vue阶段做了什么？

---

虽然是一句玩笑，但确是广东某处真实的现象。
广东挺住！

一、问题剖析

整个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上

后记

大概的做下总结：

• 初始化：执行init操作。包括且不限制initLifecycle、initState等

• 挂载：执行mount。进行元素挂载

• 编译：compiler步骤对template属性进行编译，通过vue-loader处理生成render函数

• 渲染：执行render。生成vnode

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

👍 如果对您有帮助，您的点赞是我前进的润滑剂。

给大家推荐一个实用面试题库

1、前端面试题库 （面试必备）            推荐：★★★★★

地址：前端面试题库