Vue.js 源码剖析-响应式原理、虚拟 DOM、模板编译和组件化简答

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

第一步、Vue初始化，实例成员、静态成员
首先进行vue的初始化，即初始化实例成员及静态成员.

第二步、new Vue()
初始化结束以后，调用vue的构造函数new Vue()，在构造函数中调用this._init()方法

第三步、this.init()
this.init()相当于整个项目的入口，在这个方法中，最终调用vm.$mount()

第四步、vm.$mount()

这个$mount()是src/platform/web/entry-runtime-with-compiler.js中定义的，核心作用是把模板编译为render函数，判断是否有render选项，如果没有，则会获取template选项，如果template也没有，会把el中的内容作为模板，通过compileToFunctions()方法将模板编译为render函数，编译好以后，将render存入到options.render中。

第五步、vm.$mount()

调用src/platforms/web/runtime/index.js文件中的$mount方法,这个方法中会重新获取el，因为如果是运行时版本的话，是不会走entry-runtime-with-compiler.js这个入口中获取el，所以如果是运行时版本的话，我们会在runtime/index.js的$mount()中重新获取el。

第六步、mountComponent(this,el)
这个方法在src/core/instance/lifecycle.js中定义的,首先判断是否有render选项，如果没有但是传入了模板，并且当前是开发环境，则发出警告（运行时版本不支持编译器），触发beforeMount钩子函数（开始挂载之前），定义updateComponents函数但是并未调用，这个函数中调用render()和update()两个方法，render是生成虚拟dom，update是将虚拟dom转化为真实dom并挂载到页面上，

创建Watcher实例对象，创建时，传递函数updateComponents，然后调用get方法，创建完毕后，触发钩子函数mounted(),挂载结束，返回vue实例。

第七步、Watcher.get()
创建完watcher，会调用一次get，在get方法中会调用updateComponent(),updateComponent会调用实例化时传入的render（）或者是编译模板以后生成的render（），返回vnode。然后调用vm._update（），调用vm.__patch__方法，将虚拟dom转化为真实dom并挂载到页面上，将生成的真实dom记录到vm.$el()中

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

Vue2.0+版本 的响应式原理核心是通过 ES5 的保护对象的 Object.defindeProperty 中的访问器属性中的 get 和 set 方法，data 中声明的属性都被添加了访问器属性，当读取 data 中的数据时自动调用 get 方法，当修改 data 中的数据时，自动调用 set 方法，检测到数据的变化，会触发dep的notify通知观察者 Wacher，观察者 Wacher调用update方法自动触发重新render 当前组件（子组件不会重新渲染）,生成新的虚拟 DOM 树，Vue 框架会遍历并对比新旧虚拟 DOM 树中每个节点的差别，并记录下来，最后把不同点渲染到真实 DOM 树上。因为用的Object.defindeProperty只能对属性进行监听， 所以要深度遍历每个对象，对象的新增删除也检测不到，所以vue
3.0采用了proxy，可以对整个对象进行劫持

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

v-for遍历的时候，能够追踪每个节点的身份，在进行新旧虚拟DOM节点比较的时候，会基于key的变化重新排列元素的顺序，从而重用和重新排序现有的元素，并且移除key不存在的元素，方便在diff过程中找到对应的节点，然后复用，从而减少dom的操作。

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

 /** 通用的 Vue 文件格式*/
<template>
<!-- 模版-->
</template>

<script>
// 生命周期函数 一些事件逻辑处理
</script>

<style lang="scss" scoped rel="stylesheet/scss">
<!-- css 样式或者 scss / less 等样式预处理语言-->
</style>

编译时主要是对 template 里面的内容进行编译。script 可以直接使用，style 也是可以直接抽离出来使用或者进行样式预处理。
整体编译过程：

模板编译的入库是compileToFunctions,先从缓存中加载编译好的render函数，如果没有就去调用compile函数合并选项，然后调用baseCompile(参数：合并好的选项)编译模板。之后通过调用createFunction函数，把baseCompile中生成的字符串形式JS代码转化为函数形式。当render和staticRenderFns初始化完毕，挂载到Vue实例的options对应的属性上

baseCompile函数

第一步将 模板字符串 转换成 element ASTs（parser 解析器）

<div>
  <p>{{name}}</p>
</div>

把上面转为ASTs

{
  tag: "div"
  type: 1,
  // staticRoot: false,
  // static: false,
  plain: true,
  parent: undefined,
  attrsList: [],
  attrsMap: {},
  children: [
      {
      tag: "p"
      type: 1,
      staticRoot: false,
      // static: false,
      plain: true,
      parent: {tag: "div", ...},
      attrsList: [],
      attrsMap: {},
      children: [{
          type: 2,
          text: "{{name}}",
          // static: false,
          expression: "_s(name)"
      }]
    }
  ]
}

第二步是对 AST 进行静态根节点，静态节点标记，主要用来做虚拟 DOM 的渲染优化（optimizer 优化器）
主要是循环把上面的代码的 staticRoot 及 static 设为 true / false，patch过程中会跳过静态根节点
（只包含纯文本的静态节点不是静态根节点，因为此时的优化成本大于收益）

{
  tag: "div"
  type: 1,
  staticRoot: false,
  static: false,
  plain: true,
  parent: undefined,
  attrsList: [],
  attrsMap: {},
  children: [
      {
      tag: "p"
      type: 1,
      staticRoot: false,
      static: false,
      plain: true,
      parent: {tag: "div", ...},
      attrsList: [],
      attrsMap: {},
      children: [{
          type: 2,
          text: "{{name}}",
          static: false,
          expression: "_s(name)"
      }]
    }
  ]
}

第三步是 使用 element ASTs 生成 render 函数代码字符串（generate代码生成器）
主要是把上面的 element ASTs 转成下面的 render 函数代码串, _c 是 createElement，执行后也是创建 vnode 节点

with(this){
  return _c(
    'div',
    [
      _c(
        'p',
        [
          _v(_s(name))
        ]
      )
    ]
  )
}