# fed-e-task-03-01

**Repository Path**: D-Rose/fed-e-task-03-01

## Basic Information

- **Project Name**: fed-e-task-03-01
- **Description**: 手写 Vue Router、手写响应式实现、虚拟 DOM 和 Diff 算法
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-07-07
- **Last Updated**: 2020-12-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 高士迪 ｜ Part 3 | 模块一

## 简答题

### 第一题 当我们点击按钮的时候动态给 data 增加的成员是否是响应式数据，如果不是的话，如果把新增成员设置成响应式数据，它的内部原理是什么。

新增加成员不是响应式数据，Vue响应式是在初始化Vue实例的时候创建的响应式数据，而后面新增的数据没有被设置成响应式数据，可以使用Vue.set(object, key, value) 把新增的数据设置成响应数据，其内部实现原理就是把新增成员通过defineReactive函数设置成响应式数据，然后再通过dep.notify()通知页面数据更改

### 第二题 请简述 Diff 算法的执行过程

+ 在进行同级别节点比较的时候，首先会对新老节点数组的开始和结尾节点设置标记索引，遍历的过程中移动索引
+ 在对开始和结束节点比较的试试，总共有四种情况
    1. oldStartVnode/newStartVnode （旧开始节点/新开始节点）
    2. oldEndVnode/newEndVnode（旧结束节点/新结束节点）
    3. oldStartVnode/newEndVnode（旧开始节点/新结束节点）
    4. oldEndVnode/newStartVnode（旧结束节点/新开始节点）

+ 开始节点和结束节点比较，这俩种情况类似：
    1. oldStartVnode/newStartVnode （旧开始节点/新开始节点）
    2. oldStartVnode/newEndVnode（旧开始节点/新结束节点）
+ 如果oldStartVnode和newStartVnode是sameVnode（key和sel相同）
    1. 调用 pathcVnode()对比和更新节点
    2. 把旧开始和新开始索引往后移动 oldStartVnode++  / newStartVnode++

+ oldStartVnode/newEndVnode(旧开始节点/新结束节点)相同
    1. 调用patchVnode()对比和更新节点
    2. 把oldStartVnode 对应的DOM元素，移动到右边（最后边）
    3. 更新索引

+ oldEndVnode/newStartVnode (旧结束节点/新开始节点)相同
    1. 调用patchVnode()对比和更新节点
    2. 把oldEndVnode对应的DOM元素，移动到左边（最前边）
    3. 更新索引

+ 如果不是以上四种情况：
    1. 遍历新节点，使用newStartNode的key在老节点数组中找相同节点
    2. 如果没有找到，说明newStartNode 是新节点
        + 创建新节点对应的DOM元素，插入到DOM树中
    3. 如果找到了
        + 判断新节点喝找到的老节点的sel选择器是否相同
        + 如果不相同，说明节点被修改了
            + 重新创建对应的DOM元素，插入到DOM树种
        + 如果相同，把elmToMove 对应的DOM元素，移到左边（最前边）
    4. 循环结束
        + 当老节点的所有子节点先遍历完（oldStartIdx > oldEndIdx),循环结束
        + 新节点的所有子节点先遍历完成（newStartIdx > newEndIdcx),循环结束
    5. 如果老节点的数组先遍历完成（oldStartIdx > oldEndIdx)，说明新节点有剩余，把剩余节点批量插入到右边（最后边）
    6. 如果新节点的数组优先遍历完成（newStartIdx > newEndIdcx),说明老节点有剩余，把剩余节点批量删除


### 编程题地址
+ 模拟 VueRouter的hash模式: code/hash-vue-router
+ v-html 指令，以及 v-on 指令: code/MINIVUE
+ 利用Snabbdom 实现效果: code/reorder-animation