# fed-e-task-03-02

**Repository Path**: sfl001/fed-e-task-03-02

## Basic Information

- **Project Name**: fed-e-task-03-02
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-01-03
- **Last Updated**: 2021-03-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 简答题

#### 简答题1
Vue首次渲染的过程如下：
1. 创建Vue的构造函数
2. 通过initMixin/stateMixin/eventMixin/lifecycleMixin/renderMixin方法添加Vue的实例方法
3. 通过initGlobalAPI方法添加Vue的静态方法
4. 添加Web平台相关的组件和指令，同时定义$mount方法
5. 对步骤4定义的$mount方法进行封装，如果用户没有定义render方法，解析template属性，生成render方法
6. 创建Vue实例，在创建的过程中，调用_init方法
7. _init方法会调用步骤5的$mount方法
8. $mount方法会调用到mountComponent方法
9. mountComponent方法会触发beforeMount的生命周期方法调用
10. mountComponent会定义updateComponent方法
11. mountComponent接着定义了Watcher对象，并将updateComponent方法传递给Watcher对象
12. Watcher对象在实例化的过程中，会调用updateComponent方法
13. updateComponent方法会先调用用户定义的render函数或者模板编译器生成的render函数，得到对应的虚拟DOM，同时完成依赖收集
14. updateComponent方法接着会调用_update方法，而_update方法会调用到__patch__方法
15. __patch__方法会根据render函数提供的虚拟DOM，创建出真实DOM，并挂载到页面
16. 调用生命周期mounted方法

#### 简答题2
Vue的响应式机制是基于Object.defineProperty方法、Dep对象和Watcher对象来实现的，这三者构成了一个观察者模式，在Vue实例化的时候，通过Object.defineProperty将Vue组件的props、data和计算属性转换为getter和setter函数，然后在getter函数中埋入收集Watcher对象的Dep对象，在setter函数中埋入发布更新到Watcher对象的Dep对象，而Watcher对象接收到更新后，会采用diff算法，将虚拟DOM更新到视图。

#### 简答题3
虚拟DOM中的key可以唯一标识虚拟DOM的节点，在进行diff算法更新视图时，根据key可以识别同一个虚拟DOM节点，可以实现真实DOM节点的复用，提高渲染效率。

#### 简答题4
Vue中模板编译的过程如下：
1. 使用baseCompile方法中的parse方法解析HTML字符串，得到对应的AST表示
2. 对于得到的AST，进行优化，实现其中的静态子树，静态子树在diff算法中会被忽略
3. 根据优化后的AST，生成对应的JS代码，JS代码负责创建相应的虚拟DOM