# fed-e-task-03-02

**Repository Path**: D-Rose/fed-e-task-03-02

## Basic Information

- **Project Name**: fed-e-task-03-02
- **Description**: Vue.js 源码分析（响应式、虚拟 DOM、模板编译和组件化）
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-07-19
- **Last Updated**: 2020-12-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 高士迪 ｜ Part 3 | 模块二

## 简答题

### 第一题 请简述 Vue 首次渲染的过程

1. 首先进行Vue的初始化，实例成员，通过initGlobalAPI挂载静态方法
2. 创建Vue构造函数，给Vue混入常用实例成员和方法，调用this._init(options)方法
3. 通过this._init()初始化实例成员，调用this.$mount()，共有两个this.$mount()：
     + 第一个this.$mount()是entry-runtime-with-compiler.js入口文件，这个$mount()的核心作用是帮我们把模板编译成render函数，但它首先会判断一下当前是否传入了render选项，如果没有传入的话，它会去获取我们的template选项，如果template选项也没有的话，他会把el中的内容作为我们的模板，然后把模板编译成render函数，它是通过compileToFunctions()函数，帮我们把模板编译成render函数的,当把render函数编译好之后，它会把render函数存在我们的options.render中。

     + 第二个this.$mount()是runtime/index.js中的this.$mount()方法，这个方法首先会重新获取el，因为如果是运行时版本的话，是不会走entry-runtime-with-compiler.js这个入口中获取el，所以如果是运行时版本的话，我们会在runtime/index.js的$mount()中重新获取el。
4. 接下来调用mountComponent(),这个方法在src/core/instance/lifecycle.js中定义的，在mountComponent()中，首先会判断render选项，如果没有render选项，但是我们传入了模板，并且当前是开发环境的话会发送一个警告，目的是如果我们当前使用运行时版本的Vue,而且我们没有传入render,但是传入了模版,告诉我们运行时版本不支持编译器。接下来会触发beforeMount这个生命周期中的钩子函数，也就是开始挂载之前。
5. 然后定义了updateComponent()，在这个函数中，调用vm._render和vm._update，vm._render的作用是生成虚拟DOM，vm._update的作用是将虚拟DOM转换成真实DOM，并且挂载到页面上
6. 创建Watcher对象，在创建Watcher时，传递了updateComponent这个函数，这个函数最终是在Watcher内部调用的。在Watcher内部会用了get方法，当Watcher创建完成之后，会触发生命周期中的mounted钩子函数,在get方法中，会调用updateComponent()
7. 最终返回Vue实例

### 第二题 请简述 Vue 响应式原理。

+ Vue的响应式是从Vue的实例init()方法中开始的，在init()方法中先调用initState()初始化Vue实例的状态，在initState方法中调用了initData()， initData()是把data属性注入到Vue实例上，并且调用observe(data)将data对象转化成响应式的对象。
+ observe是响应式的入口, 在observe(value)中，首先判断传入的参数value是否是对象，如果不是对象直接返回。再判断value对象是否有__ob__这个属性（把响应式数据缓存），如果有说明做过了响应式处理，则直接返回，如果没有，创建Observer对象，并且返回Observer对象。
+ 在创建Observer对象时，给当前的value对象定义不可枚举的__ob__属性，记录当前的Observer对象，然后再进行数组的响应式处理和对象的响应式处理，数组的响应式处理就是拦截数组的几个特殊的方法，push、pop、shift等，然后找到数组对象中的__ob__对象中的dep,调用dep的notify()方法，再遍历数组中每一个成员，对每个成员调用observer()，如果这个成员是对象的话，也会转换成响应式对象。对象的响应式处理，就是调用walk方法，walk方法就是遍历对象的每一个属性，对每个属性调用defineReactive方法
+ defineReactive会为每一个属性创建对应的dep对象，让dep去收集依赖，如果当前属性的值是对象，会调用observe。defineReactive中最核心的方法是getter 和 setter。getter 的作用是收集依赖，收集依赖时, 为每一个属性收集依赖，如果这个属性的值是对象，那也要为子对象收集依赖，最后返回属性的值。在setter 中，先保存新值，如果新值是对象，也要调用 observe ，把新设置的对象也转换成响应式的对象,然后派发更新（发送通知），调用dep.notify()
+ 收集依赖时，在watcher对象的get方法中调用pushTarget,记录Dep.target属性，访问data中的成员的时候收集依赖，defineReactive的getter中收集依赖，把属性对应的 watcher 对象添加到dep的subs数组中，给childOb收集依赖，目的是子对象添加和删除成员时发送通知。
+ 在数据发生变化的时候，会调用dep.notify()发送通知，dep.notify()会调用watcher对象的update()方法，update()中的调用的queueWatcher()会去判断watcher是否被处理，如果这个watcher对象没有的话添加到queue队列中，并调用flushScheduleQueue()，flushScheduleQueue()触发beforeUpdate钩子函数调用watcher.run()：run()-->get() --> getter() --> updateComponent()
+ 清空上一次依赖，触发active钩子函数，触发update钩子函数

### 第三题 请简述虚拟 DOM 中 Key 的作用和好处。
+ 作用 在v-for中为每一个节点设置唯一key，可以在虚拟dom diff算法中更准确的找到对应新旧节点做比较
+ 设置唯一key 在diff算法时，检测key值达到复用相同key值节点，做到减少dom更新操作，来优化性能

### 第四题 请简述 Vue 中模板编译的过程
+ 模板编译是从compileToFunctions()开始的。compileToFunctions()函数内部先从缓存中加载编译好的render函数，如果缓存中没有render函数，就调用compile()函数。

+ 在compile()函数中合并options，然后把合并好的options和模板传递给baseCompile()函数，在baseCompile完成模板编译的三件核心事情：
     + 首先通过parse()把模板字符串转换成AST 抽象语法树
     + 然后对AST进行优化，标记抽象语法树中的静态节点和静态根节点
     + patch的过程中判断是否静态节点，如果是静态节点不会重新创建节点（静态节点不会改变），最后把优化过的AST对象转换成字符串形式的js代码

+ 当compile()执行完毕后会返回compileToFunctions()函数，通过调用createFunction()继续把字符串形式的js代码转换成函数，把生成结果返回

+ 当render和staticRenderFns初始化完毕，最终挂载到vue实例的options对应的属性中。到此模板编译的过程结束