# fed-e-task-03-02

**Repository Path**: learning-summary/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-01-06
- **Last Updated**: 2021-01-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

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

## 一、简答题

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

<img title="" src="https://img-blog.csdnimg.cn/2021012418385614.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzI5MDM3,size_16,color_FFFFFF,t_70#pic_center" alt="在这里插入图片描述" width="663" data-align="center">

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

    ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210124212651369.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzI5MDM3,size_16,color_FFFFFF,t_70#pic_center)

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

首先需要说明diff算法的原理

- 老开始节点和新开始节点对比

- 老结束节点和新结束节点对比

- 老开始节点和新结束节点对比

- 老结束节点和新开始节点对比

- 上述情况都不满足才会老节点找新节点存在的索引

不设置或者设置key为index索引值，当往数组中splice插入一个元素时，会在updateChildren方法中，里面的sameVnode方法会判断为同一个vnode，不断比较老开始节点和新开始节点，索引向后移动，子节点会多次操作dom消耗性能。

```js
function sameVnode (a, b) {
  return (
    a.key === b.key && (
      (
        a.tag === b.tag &&
        a.isComment === b.isComment &&
        isDef(a.data) === isDef(b.data) &&
        sameInputType(a, b)
      ) || (
        isTrue(a.isAsyncPlaceholder) &&
        a.asyncFactory === b.asyncFactory &&
        isUndef(b.asyncFactory.error)
      )
    )
  )
}
```

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

![在这里插入图片描述](https://img-blog.csdnimg.cn/20210126235657367.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzI5MDM3,size_16,color_FFFFFF,t_70)