# fed-e-task-03-01

**Repository Path**: hanfengmi/fed-e-task-03-01

## Basic Information

- **Project Name**: fed-e-task-03-01
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

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

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 03-01 测验

### 简答题

#### 1、当我们点击按钮的时候动态给 data 增加的成员是否是响应式数据，如果不是的话，如何把新增成员设置成响应式数据，它的内部原理是什么。
```
let vm = new Vue({
 el: '#el'
 data: {
  o: 'object',
  dog: {}
 },
 method: {
  clickHandler () {
   // 该 name 属性是否是响应式的
   this.dog.name = 'Trump'
  }
 }
})
```
> 不是响应式的
> 代码见code/toVue/js/observer.js
> 将新增成员变成响应式数据，是基于Object.defineProperty实现的


#### 2、请简述 Diff 算法的执行过程
> 对比新旧节点的children,更新DOM;只查找同级别的子节点依次比较，然后再查找下级别节点进行比较；   
> 同级别节点比较时，首先会对新老节点开始和结尾设置标记索引，遍历过程中移动索引；   
> 开始和结束索引比较时有四种情况：旧开始/新开始，旧结束/新结束，旧开始/新结束，旧结束/新开始
> 如果不是上述情况，遍历新开始节点的key在就节点查找，如果没有就说明是新节点；如果找到，判断sel选择器是否相同，如果不同说明节点被修改；如果相同，把DOM元素以到最左边。    
> 循环结束，如果老节点先结束，说明新节点有剩余，多余节点插到右边；如果新节点先结束，说明老节点有剩余，将剩余节点删除。

### 编程题

#### 1、模拟 VueRouter 的 hash 模式的实现，实现思路和 History 模式类似，把 URL 中的 # 后面的内容作为路由的地址，可以通过 hashchange 事件监听路由地址的变化。
> 见code/vue-init

#### 2、在模拟 Vue.js 响应式源码的基础上实现 v-html 指令，以及 v-on 指令。
> 见 code/toVue

#### 3、参考 Snabbdom 提供的电影列表的示例，利用Snabbdom 实现类似的效果 
> 见 code/snabbdon-init