# part_three_module_two

**Repository Path**: february23/part_three_module_two

## Basic Information

- **Project Name**: part_three_module_two
- **Description**: 拉勾part 3 模块2
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-12-09
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# part_three_module_two

#### 介绍
拉勾part 3 模块2

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

![avatar](https://s-pictures.oss-cn-beijing.aliyuncs.com/vue%E9%80%BB%E8%BE%91/%E5%88%9D%E6%AC%A1%E6%B8%B2%E6%9F%93%E8%BF%87%E7%A8%8B.png?Expires=1608016845&OSSAccessKeyId=TMP.3Kimig5c36bDVVx5K5H8bPuJUZCaVx3y2aQV4jG7fQSPFo4bqxxQLLnCcZN43EhAqtZyHD9JYK8oBGn6hv1aKxE58T7sNy&Signature=ocnbZPF%2BjnL%2FzfWPwLWFI4GKttc%3D&versionId=CAEQEBiBgMC6mJ2UsxciIGFkNjZmMDBhNDU5MjQxM2ZiMDY1NjVjMjVmOGM1OWZh&response-content-type=application%2Foctet-stream)

#### 请简述 Vue 响应式原理

![avatar](https://s-pictures.oss-cn-beijing.aliyuncs.com/vue%E9%80%BB%E8%BE%91/%E6%95%B0%E6%8D%AE%E5%93%8D%E5%BA%94%E5%BC%8F.png?Expires=1608016874&OSSAccessKeyId=TMP.3Kimig5c36bDVVx5K5H8bPuJUZCaVx3y2aQV4jG7fQSPFo4bqxxQLLnCcZN43EhAqtZyHD9JYK8oBGn6hv1aKxE58T7sNy&Signature=tMRd90Chs2mP%2FujDuiPAfzNnlg0%3D&versionId=CAEQEBiBgICYmJ2UsxciIDgzNWQ5YTBkN2I0NTQxZGFhOWNmZTkzYmI3YWEwYTY0&response-content-type=application%2Foctet-stream)


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

以遍历数组为例：原始数据为[1,2,3,4]，修改后的数据为[1,5,2,3,4]

```
<div id="demo">
    <span v-for="item in msg"> {{ item }} </span>
</div>
<script>
    const vm = new Vue({
        el: "#demo",
        data: {
            msg: [1, 2, 3, 4]
        },
    })
</script>
```

通过_render()函数获取到的虚拟dom结构，新旧虚拟dom的children结构如下：


```
[{
    children: [{
        children: undefined,
        key: undefined,
        text: " 1 ",
        ...
    }],
    key: undefined,
    ...
},{
    children: [{
        children: undefined,
        key: undefined,
        text: " 2 ",
        ...
    }],
    key: undefined,
    ...
},{
    children: [{
        children: undefined,
        key: undefined,
        text: " 3 ",
        ...
    }],
    key: undefined,
    ...
},{
    children: [{
        children: undefined,
        key: undefined,
        text: " 4 ",
        ...
    }],
    key: undefined,
    ...
}]
```

ch为：

```
[{
    children: [{
        children: undefined,
        key: undefined,
        text: " 1 ",
        ...
    }],
    key: undefined,
    text: undefined,
    ...
},{
    children: [{
        children: undefined,
        key: undefined,
        text: " 5 ",
        ...
    }],
    key: undefined,
    text: undefined,
    ...
},{
    children: [{
        children: undefined,
        key: undefined,
        text: " 2 ",
        ...
    }],
    key: undefined,
    text: undefined,
    ...
},{
    children: [{
        children: undefined,
        key: undefined,
        text: " 3 ",
        ...
    }],
    key: undefined,
    text: undefined,
    ...
},{
    children: [{
        children: undefined,
        key: undefined,
        text: " 4 ",
        ...
    }],
    key: undefined,
    text: undefined,
    ...
}]
```

sameVnode的判断条件为:

```
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)
    )
)
```

根据updateChildren的判断逻辑：![avatar](https://s-pictures.oss-cn-beijing.aliyuncs.com/vue%E9%80%BB%E8%BE%91/updateChildren%E5%88%A4%E6%96%AD%E9%80%BB%E8%BE%91.png?Expires=1608016897&OSSAccessKeyId=TMP.3Kimig5c36bDVVx5K5H8bPuJUZCaVx3y2aQV4jG7fQSPFo4bqxxQLLnCcZN43EhAqtZyHD9JYK8oBGn6hv1aKxE58T7sNy&Signature=K9caMQXnHk2w2ivRPEIGqhlogAc%3D&versionId=CAEQEBiBgICx0ZmUsxciIDFhZjliNmY2MzUxODQxOTg4MDdlZmIxYTgyMWRjZTU5&response-content-type=application%2Foctet-stream)

如果不设置key，当执行到sameVnode(oldStartVnode, newStartVnode)时，sameVnode函数的返回值为true，就会继续执行patchVnode函数，直到patchVnode中的新旧节点有text属性且text值不同时，更新dom树，如此，就会执行3次dom更新和1次dom插入操作

如果设置key，当执行到sameVnode(oldStartVnode, newStartVnode)时，sameVnode函数的返回值为false，就会继续执行往下的判断逻辑，这时新旧节点就会以从后向前的方向判断子节点是否相同，由于从后向前判断时，新旧子节点都是相同的，因此不做dom更新操作，最后只执行一次dom插入操作


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

![avatar](https://s-pictures.oss-cn-beijing.aliyuncs.com/vue%E9%80%BB%E8%BE%91/%E6%A8%A1%E6%9D%BF%E7%BC%96%E8%AF%91%E8%BF%87%E7%A8%8B.png?Expires=1608016913&OSSAccessKeyId=TMP.3Kimig5c36bDVVx5K5H8bPuJUZCaVx3y2aQV4jG7fQSPFo4bqxxQLLnCcZN43EhAqtZyHD9JYK8oBGn6hv1aKxE58T7sNy&Signature=ebtWj4Zfv8ah6vGvqplcB%2FC0Zzg%3D&versionId=CAEQEBiBgICbyZmUsxciIGRiY2NlZWRhZTZkMzQ4NWViOGMzZGFlYzQxZTE3NWZj&response-content-type=application%2Foctet-stream)

模板编译的核心在baseCompile函数中，该函数的功能可分为三部分

1. 将模板转换成抽象语法树ast 

2. 优化抽象语法树，主要是添加静态节点和静态根节点标记，更新渲染时，如果是静态节点或者静态根节点，就将此节点跳过，直接比较非静态节点，提高效率

3. 生成字符串格式的render函数