Vue源码各过程的简单概括

1. Vue 首次渲染过程：

• Vue 初始化，添加实例成员、静态成员，并在原型上挂载__patch__方法和$mount方法。
• 初始化结束，调用new Vue()。在new Vue()的过程中，调用this.init()方法, 给vue的实例挂载各种功能。
• 在 this.init() 内部最终会调用 entry-runtime-with-compiler.js中的 vm.$mount(),用于获取render函数。
• $mount 获取 render 过程: 如果用户没有传入render,会将template编译为render，如果template也没有，则将el中的内容作为模版，通过 compileToFunctions() 生成render。
• 接下来调用 runtime/index.js 中的 $mount, 重新获取 el 并调用 mountComponent() 方法。 mountComponent 用于触发 beforeMount，定义 updateComponent,创建watcher实例，触发mounted,并最终返回vm实例。
• 创建完watcher的实例后会调用一次 watcher.get() 方法，该方法会调用updateComponent(), updateComponent()又会调用 vm.render() 以及vm.update(),vm._update()会调用vm.patch()挂载真实dom,并将真实dom记录于vm.$el中。

2. Vue 响应式原理：

   • 响应式处理整体过程为initState() => initData() => observe()
   • 其中observe是响应式处理的入口，通过该方法为data对象转化为响应式对象。
   • observe方法接收的是对象且该对象不是响应式时，会为该对象创建一个observe对象，会调用Observer类
   • Observer类中判断该value是数组还是对象，进行不同的处理
   • 数组的响应化处理，是重写push,pop,sort等会修改原数组的方法，调用对应的notify.然后遍历数组中的成员，判断其类型决定是否调用observe方法
     对象的响应化处理，会调用walk方法，遍历对象中的每个属性，调用defineReactive
   • defineReactive的核心是为每一个属性定义getter和setter,getter中收集依赖，setter中派发更新,即调用dep.notify。
   • dep.notify()会调用watcher的update()方法。如果该watcher未被处理，会被添加到queue队列中，并调用flushSchedulerQueue()方法，该方法会触发对应的钩子函数以及调用watcher.run()更新视图。

3. 虚拟 DOM 中 Key 的作用和好处：

   作用： 标识节点在当前层级的唯一性。 好处： 在执行 updateChildren 对比新旧 Vnode 的子节点差异时，通过设置 key 可以进行更高效的比较，便于复用节点。 降低创建销毁节点成本，从而减少 dom 操作，提升更新 dom 的性能。

4. Vue 中模版编译过程：

   • 模版编译入口函数是compileToFunctions,首先判断是否有缓存好的render函数，如果没有，则调用compile。compile用作于合并options, 它将用户传入的options和初始化的options合并起来。然后将template和合并好的options传递给baseCompile。
   • 在 baseCompile 中完成了模版编译的核心部分：
     调用parse()将template转换成AST对象；
     调用optimize()优化 AST tree；
     调用 generate() 将优化后的AST tree转换成字符串形式的代码。
   • 最后回到compileToFunctions，通过createFunction()将字符串形式的代码转换为函数,并将其挂载到Vue实例的options对应的属性中。