# fed-e-task-03-02

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

## Basic Information

- **Project Name**: fed-e-task-03-02
- **Description**: 大前端训练营第三部分模块二（关于Vue核心原理基础知识）
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-07-28
- **Last Updated**: 2021-09-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 揭智勇 ｜ Part 3 | 模块二

------

## 简答题

### 1、请简述Vue首次渲染的过程。

> Vue首次渲染主要有init,mount阶段，init主要用于初始化初始化组件方法，状态，实现数据响应式等等，mount主要用于将初始化好的Vue实例挂载到dom中。

1. 调用_init方法初始化组件实例
   - 初始化生命周期
   - 初始化事件
   - 调用beforeCreated生命周期方法
   - 初始化props，methods,data,computed与watch等，并且实现【响应式】以及【依赖收集】
   - 调用created生命周期方法
2. 调用$mount方法挂载组件实例
   - 判断有无render函数，没有render function及存在template的情况下，将template编译成render function
   - 调用mountComponet方法挂载组件
   - 定义updateComponent方法（该方法渲染render函数返回Vnode，然后调用_update方法进行更新dom）
   - 初始化渲染watcher实例
   - 调用updateComponent方法更新dom
   - 调用mounted生命周期方法

### 2、请简述Vue响应式原理。

1. 响应式数据

   >通过Object.defineProperty劫持对象的属性实现数据响应式化，在getter方法进行依赖收集，在setter方法中数据变化调用notify方法通知观察者更新DOM.

   

2. 响应式依赖收集

   > 实现Dep订阅者对象，Dep主要用于存放Watcher观察者及通知观察者；观察者主要用于dom更新

### 3、请简述虚拟DOM中key的作用和好处。

> 虚拟DOM的key作为虚拟节点的唯一标识,其主要用在diff算法中，用来判断新旧vnode是否是相同vnode的关键；如果不使用key,Vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法，使用key，它会基于key的变化重新排列元素顺序，并且会移除key不存在的元素。
> 合理的利用key可以提高diff算法效率，减少dom操作，从而提高性能；但是如果使用重复的key会造成渲染错误，key应该也使用唯一的（往往使用服务端返回的id）；另外使用key不一定比不使用key的效率高，但是不使用key可能会因为vue会尽可能尝试修复/再利用类型元素导致渲染不能服务预期；所以建议使用key避免渲染出错；

### 4、请简述 Vue 中模板编译的过程。

> ​	Vue中模板编译编译主要分为parse,optimize,generate, to function四个节点，最终生成render function。

1. parse分析阶段：通过正则,采用循环的方式将template模板字符串解析，最终形成AST;
2. optimite优化阶段：对AST进行优化，为AST中静态节点做上标记，添加static,staticRoot属性来标识节点是否为静态的，返回新的AST。另外添加静态标识主要用于diff算法，在diff算法中跳过静态节点的对比，提高性能。
3. generate生成render function字符换：将新的AST转化成render function字符串。
4. to Function将字符串转换成render function阶段： 将generate阶段生成的字符串通过new Function构造函数生成render function