# part3-02

**Repository Path**: jane900/part3-02

## Basic Information

- **Project Name**: part3-02
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-02-26
- **Last Updated**: 2021-02-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

###### 1. vue首次渲染过程

* vue初始化，挂载vue的静态成员，实例成员
* 调用entry-runtime-with-compiler.js中的$mount将模板编译成render函数
* 调用core/intances/index.js中的$mount方法，将模板渲染到界面上，创建watcher实例
* 调用watcher的get方法，执行uptateComponent渲染视图

###### 2. vue响应式原理

* 在vue初始化过程中，执行initState方法，initState中再执行initData方法
* 调用observe方法，创建Observer对象
* 在Observer中将数据转换成响应式对象，包括对数组进行特殊处理，将对象递归转换成响应对象
* 在defineReactive定义getter与setter， 在getter中手机依赖，在setter中派发更新

######  3. 请简述虚拟 DOM 中 Key 的作用和好处

以在原有的dom节点中间插入一个dom节点为例：

当不设置key的时候，在进行diff算法时，对多次对比出文本节点不一致，导致多次操作dom修改文本

当设置key了之后，进行diff算法时，对比出开始节点不一致之后，就从后往前依次比较了，此时结束节点有多个内容都是一致的，减少了操作dom的次数，性能更好。

###### 4. vue模板编译的过

入口函数 compileToFunctions

* check cache，读取缓存中的 CompiledFunctionResult 对象

* 执行compile，合并options 

* 执行baseCompile，将模板转换成 ast 抽象语法树，优化抽象语法树，把抽象语法树生成字符串形式的 js 代码