前言

• 本篇录入吊打面试官专栏，希望能祝君拿下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例子，如下{{ message }}