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

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

分析

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

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

• 初始化
• 建立更新机制

回：

• 挂载过程指的是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上

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

最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！

可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。

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