# fed-e-task-03-02

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

## Basic Information

- **Project Name**: fed-e-task-03-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-07-06
- **Last Updated**: 2021-07-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## Vue.js 源码剖析-响应式原理、虚拟 DOM、模板编译和组件化

### 简答题

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

- VUE首先初始化实例成员，静态成员
- new Vue()  构造函数中调用 this._init()方法，初始化vm 
- 调用vm.$mount()函数，
- 调用mountComponent()，然后会触发生命周期函数beforeMount()，定义updataComponent，创建watcher实例，触发mounted，返回vm实例
- watcher.get()。创建完watcher会调用一次get。然后调用updateComponent()。调用vm._render()方法创建虚拟dom。调用vm._update方法将虚拟dom更新到真实dom。

　

　

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

　答：简言之，使用Object的访问器属性对data做了一层代理，从而可以监听到对数据的读写。

可以这么理解，将前端分为表现层、数据层、模型层。表现层就是html部分，数据层就是data，模型层就是操作data的逻辑。

getter函数内部实现表现层与数据层的关联，因为data中的数据之所以响应式，正是因为data要对表现层负责。

setter函数内部实现模型层与数据层的关联。

从而建立起模型层与表现层的关联关系，也就是响应式。

　

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

　key的好处就是可以让vue尽可能的减少对真实dom的操作，从而提高性能。

在大部分的前端场景中，节点替换、增加、删除等等都出现在同级节点，从而衍生出diff算法来优化，key就是为diff算法服务的。

简言之，就是key能够优化diff算法，减少真实dom操作。

　

　

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

- template通过compiler编译成ast抽象语法树
- ast抽象语法树生成相应的render函数
- 生成虚拟节点VNode
- 将VNode与真实dom进行比较，将差异渲染到页面。