# fed-e-task-03-01

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

## Basic Information

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

## Statistics

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

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 一、简答题
## 1、当我们点击按钮的时候动态给 data 增加的成员是否是响应式数据，如果不是的话，如何把新增成员设置成响应式数据，它的内部原理是什么。
```javascript
let vm = new Vue({
 el: '#el',
 data: {
  o: 'object',
  dog: {}
 },
 method: {
  clickHandler () {
   // 该 name 属性是否是响应式的
   this.dog.name = 'Trump'
  }
 }
})
```
需要重新写
答：不是响应式的，如果需要把新增成员设置为响应式的可以使用 $set 方法，$set内部调用
Object.defineProperty 方法重新对需要新增的属性设置get和set属性，并且调用
defineReactive方法生成dep对象并收集依赖。



## 2、请简述 Diff 算法的执行过程
答：在一开始的时候会根据真实DOM创建一个额外的 Virtual DOM，当数据发生变化生成一个新的vnode，
然后对 oldVnode 和 newVnode 进行（新旧开始节点、新旧结束节点、新开始节点和旧结束节点、旧结
束节点和新开始节点这几种情况）对比发现有不一样的地方，就更新到真实的DOM上，使oldVnode的值为
Vnode，整个过程就是调用patch函数，比较新旧节点，一边比较一边给真实DOM打补丁