# fed-e-task-03-05

**Repository Path**: vvweb/fed-e-task-03-05

## Basic Information

- **Project Name**: fed-e-task-03-05
- **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-10-21
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

1、Vue 3.0 性能提升主要是通过哪几方面体现的？
### **编译优化**

重写DOM提高渲染性能

- Vue.js 2.x中通过标记静态根节点，优化diff的过程
- Vue.js 3.0 中标记和提升所有的静态根节点，diff的时候只需要对比动态节点内容

### **数据劫持优化**

- Vue.js 2.x中响应式系统的核心 `defineProperty`，初始化的时候递归遍历所有的属性，转化为getter、setter
- Vue.js 3.0中使用 `Proxy` 对象重写响应式系统
  - 可监听动态新增的属性
  - 可以监听删除的属性
  - 可以监听数组的索引和length属性

### **源码体积优化**

- 使用tree-shaking 的技术，减少打包体积
- Vue 3.0中移除了一些不常用的API,例如：inline-template,filter等
- Vue3中的没用到的模块不会被打包，但是核心模块会打包。Keep-Alive、transition等都是按需引入的。

2、Vue 3.0 所采用的 Composition Api 与 Vue 2.x使用的Options Api 有什么区别？

Options API

- 包含一个描述组件选项(data、methods、props等)的对象
- Options API 开发复杂组件，同一个功能逻辑的代码被拆分到不同选项

Composition API

- Vue.js 3.0 新增的一组API
- 一组基于函数的API
- 根据逻辑相关性组织代码。提高可读性和可维护性。
- 可以更灵活的组织组件的逻辑
- 更好的类型推导，容易结合TypeScript


3、Proxy 相对于 Object.defineProperty 有哪些优点？

* 可监听动态新增的属性
* 可以监听删除的属性
* 可以监听数组的索引和length属性
* Proxy返回一个新对象，可以只操作新对象达到目的，而Object.defineProperty只能遍历对象属性直接修改

4、Vue 3.0 在编译方面有哪些优化？

* 标记(patchFlag)和提升(hoistStatic)所有静态根节点，diff的时候只需要对比动态节点内容
* 缓存事件处理函数
* 模块热更新
* fragment （升级vetur插件）


5、Vue.js 3.0 响应式系统的实现原理？

* vue3.0的响应式系统是通过es6的Proxy实现的。在触发get时使用track收集依赖,在调用set、deleteProperty等方法时调用trigger方法触发更新。
* 当我们触发get时使用track方法收集依赖时首先判断当前是否存在一个activeEffect对象,不存在直接返回, 存在则首先判断当前target在targetMap的集合中是否存在，如果不存在就在targetMap的集合中创建对应的集合depsMap, 然后判断当前key在depsMap中是否存在,如果不存在就在depsMap的集合中创建对应的集合dep, 将对应的依赖activeEffect收集到对应key值对应的dep集合中。
* 在set、deleteProperty等方法时调用trigger方法触发更新时，会依据传入的target、key在targetMap中一层层的去寻找 得到对应的dep集合，中间如果没有找到直接返回，找到dep集合后，循环调用dep中的activeEffect
* target ：当前proxy的代理对象
* key ：当前触发proxy操作的属性
* targetMap ：一个new weakMap()集合，键名：target, 键值：一个 new Map()集合 对应下面的depsMap
* depsMap：一个new Map()集合，键名：key值，键值：一个new Set()集合 对应下面的dep
* dep：一个new Set()集合，当前对象key值的依赖activeEffect的集合
* activeEffect : 当前存活的依赖于响应式对象中属性key的操作