关于vue面试官常问的问题2

1、请简述 Vue 首次渲染的过程。

• 首先进行Vue的初始化，初始化Vue的实例成员、静态成员
• 始化结束之后，定义了构造函数，调用了this._init(options)方法
• 在_init()中调用this.$mount()
  • 说明：$mount()的核心作用是帮我们把模板编译成render函数，但它首先会判断当前是否传入了render选项，如果没有传入的话，它会去获取我们的template选项，如果template选项也没有的话，他会把el中的内容作为我们的模板，然后把模板编译成render函数，它是通过compileToFunctions()函数，帮我们把模板编译成render函数的,当把render函数编译好之后，它会把render函数我们挂载在options.render中
• 接下来调用mountComponent(),首先会判断render选项，如果没有render选项，但是我们传入了模板，并且当前是开发环境的话会发送一个警告，目的是如果我们当前使用运行时版本的Vue,而且我们没有传入render,但是传入了template,告诉我们运行时版本不支持编译器。接下来会触发beforeMount生命周期中的钩子函数(开始挂载之前)
• 再接下来调用updateComponent()，在这个函数中，调用vm._render和vm._update，vm._render的作用是生成虚拟DOM，vm._update的作用是将虚拟DOM转换成真实DOM，并且挂载到页面上（页面上已经能够看到了）
• 再接下来创建Watcher对象，在创建Watcher时，传递了updateComponent这个函数，这个函数最终是在Watcher内部调用的。在Watcher内部会用了get方法，当Watcher创建完成之后,会触发生命周期中的mounted钩子函数,在get方法中，会调用updateComponent()
• 挂载结束，返回Vue实例

2、请简述 Vue 响应式原理。

• 响应式指的是，当你的数据有变化，vue能够做出响应，去重新渲染页面，它采用数据劫持,结合发布者—订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter、getter，在数据变动时发布消息给订阅者，触发响应的监听回调

• vue3.0中的响应式则是使用es6中的方法Proxy。这个方法不需要循环遍历data的每个属性，对每个属性都做一遍响应式处理。而是直接代理了整个data对象，拦截这个对象所包含的所有属性的get、set方法。

  • 好处:
  • 1、就是在我们动态为data添加一个属性时，不用做任何处理，这个属性就已经是响应式的了。
  • 2、数组的任何操作也都可以触发响应。

3、请简述虚拟 DOM 中 Key 的作用和好处。

• 作用：
  能够跟踪每个节点，在进行比较的时候，会基于key值的变化重新排列元素顺序。从而重用和重新排序现有元素，并且会移除key不存在的元素。方便让vnode在diff的过程中找到对应的节点，然后复用。

• 好处：
  可以减少dom的操作，减少diff和渲染所需要的时间，提升了性能

  vue2.0中创建虚拟dom的时候 空格还有换行也会被转成单个的虚拟dom，所以代码习惯也很重要（影响性能）
  vue3.0中则优化了虚拟dom算法，去除了空格、换行等创建的无用的虚拟dom，进一步的提升了性能

4、请简述 Vue 中模板编译的过程。

1.缓存公共的mount函数，并重写浏览器平台的mount

2.判断是否传入了render函数，没有的话，是否传入了template，没有的话，则获取el节点作为template

3.调用baseCompile函数

4.解析器(parse)将模板字符串的模板编译转换成 AST 抽象语法树

5.优化器(optimize)-对AST进行静态节点标记，主要用来做虚拟DOM的渲染优化

6.通过generate将AST抽象语法树转换为render函数的js字符串

7. 将render函数通过createFunction函数转换为一个可以执行的函数将render函数挂载到options中

8.执行公共的mount函数