# fed-e-task-03-02

**Repository Path**: ms_H/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**: 2020-12-19
- **Last Updated**: 2021-01-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 一、简答题

### 1、请简述Vue首次渲染的过程
- 答：在vue的首次`渲染之前`，会进行vue的初始化我们的实例成员和静态成员;在`初始化结束之后`，
会调用Vue的构造函数；然后调用了_init()方法，最终调用了$mount(编译模板中的) 方法，将render或者是模板
编译成函数。调用第二个$mount中的 mountComponent方法，判断有render函数或者是否传入template
模板，接着触发beforeMount，定义updateComponent 方法渲染虚拟DOM，并转换成真实dom。创建
watcher对象，调用get() 方法，触发mounted生周周期，返回虚拟DOM


### 2、请简述Vue响应式原理
- 答：在生成Vue实例的时候，对传入的data进行遍历，通过 Object.defineProperty() 将对象中的每个属性
转换化成get和set，在内部追踪相关依赖，在属性被访问和修改的时候发送通知。每个组件实例都会对应的
Watcher实例对象，他们在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时，就会通知
watcher 进行重新，从而使与它相关联的组件得到更新。



### 3、请简述虚拟DOM中key的作用和好处
答：
- 作用：如果在循环的时候为节点添加了key，在vue进行diff算法的时候为循环的每个节点添加上唯一标识，
diff算法就能正确的识别此节点。
- 好处：在为节点添加key之后，在遇到值不相等的时候直接从后往前去找，找到正确的的位置进行操作，
竟可能的重用节点，减少了DOM操作。

### 4、请简述Vue中模板编译的过程
- 答：先从缓存加载编译好的render函数，如果缓存中没有的话，就（调用compile方法）开始编译，
合并options选项，接着调用（baseCompile方法）将template转换成AST语法树，调用（optimize方法）
对AST语法树进行优化，标记静态语法树中的所有静态根节点，patch的过程中会跳过静态根节点，最后
（调用generate方法）将优化过的AST对象转化成字符串形式的代码，最后调用（compileToFunctions方法）
将字符串形式的代码转化成函数形式的代码，在render和静态节点初始化完毕，就会挂载带vue实例的options
对应的属性中