# fed-e-task-03-05

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

## Basic Information

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

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-07-25
- **Last Updated**: 2021-07-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 简答题

（请直接在本文件中作答）

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

　（1）响应式系统升级：使用proxy代替defineProperty

​	（2）编译优化：

​			vue3中标记和提升所有的静态根节点，diff时候只需要对比动态节点内容即可。

​	（3）优化打包体积：

​			移除了一些不常用的API，笔记inline-template，filter等等

​			tree-shaking

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

　答：简言之，Options Api = Σ (Composition Api )。

​			理想情况下，项目中每个组件只有一个功能，自然不需要Composition Api 。但是现实情况很复杂，有时候一个组件会承担多种功能，而这时Options Api 会把多种功能糅合在一起，造成阅读代码困难。

如果此时使用Composition Api，可以对代码进行进一步的拆分，使得代码逻辑更加清晰。

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

- 最大的优点：Proxy是非侵入式的,proxy只是一个代理层，从逻辑上容易讲通，更符合人类普遍认知
- 可以直接监听对象而非监听对象属性
- 能够监听数组的变化（之前的defineProperty 不可以），比如说数组长度，数组[key]的直接赋值等等
- Proxy 的拦截方法很多，可以更有效的对对象进行监听、操作。

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

- vue2中通过标记静态根节点，优化diff的过程
- vue3中标记和提升所有的静态根节点，diff的时候只需要对比动态节点内容
  - Fragments 
  - 静态提升
  - patch flag
  - 缓存实践处理函数


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

　答：本质上还是get过程收集依赖，set过程触发依赖。

#### 	reactive函数对数据进行响应式处理

- 函数内部对get过程添加收集依赖过程，这里收集依赖使用的是track函数
- 函数内部对set过程添加触发机制，如果数据发生更新，则触发trigger函数

####     track函数收集依赖（接收target,key两个参数）

- 判断 targetMap中是否有target键，没有的话创建map类型存储target键和activeEffect，有的话在target对应的map中加入activeEffect。结构如下：

```
// WeakMap类型
targetMap = {
	// target是map类型
	target:{
		// key是set类型
		key:[activeEffect]
	}
}
```

####     trigger函数触发更新

获取上文中的targetMap.target.key，遍历并执行activeEffect()。