# Task-03-05

**Repository Path**: fishlyn/task-03-05

## Basic Information

- **Project Name**: 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**: 2020-11-16
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Part3 模块五 作业

## 第一题

**Vue 3.0 性能提升主要通过哪几方面体现的**

* 响应式系统提升
  * Vue 3.0 中使用 Proxy 对象重写响应式系统
    * 可以监听动态新增的属性
    * 可以监听删除的属性
    * 可以监听数组的索引和 length 属性
* 编译优化
  * Vue 3.0 中标记和提升所有的静态根节点，diff 的时候只需要对比动态节点内容
    * Fragments 片段，模板组件中不需要根节点了，可以放多个同级的内容
    * 标记和提升所有的静态根节点，在需要更新的时候通过 Patch flag 跳过静态根节点，只更新动态节点
    * 增加了缓存事件处理函数
* 优化打包体积
  * Vue 3.0 中移除了一些不常用的 API，例如: inline-template、filter 等
  * 更好的支持 Tree-shaking



## 第二题

**Vue 3.0 所采用的 Compostion Api 与 Vue 2.x 使用的 Options Api 有什么区别**

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

* Compostion API
  * Vue.js 3.0 新增的一组 API
  * 一组基于函数的 API
  * 可以更灵活的组织组件的逻辑



## 第三题

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

* 可以直接监听对象而非属性
* 可以直接监听数组的变化
* 有多种拦截的方式
* Proxy返回一个新对象，可以只操作新对象达到目的，而Object.defineProperty只能遍历对象属性直接修改



## 第四题

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

* Fragments 片段，模板组件中不需要根节点了，可以放多个同级的内容
* 标记和提升所有的静态根节点，在需要更新的时候通过 Patch flag 跳过静态根节点，只更新动态节点
* 增加了缓存事件处理函数



## 第五题

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

* vue 3.0 中使用了 Proxy 代替 Object.defineProperty ，除了监听对象的读取和写入外，还可以监听对象的删除和数组的索引及长度变化
* 使用 reactive 方法将对象转换成响应式的数据，并返回 Proxy 对象
* effect 函数通过传入的回调，将需要触发响应式更新的数据存储起来
* 使用 track 函数收集依赖，通过传入的目标对象和 key，将当前活动的 effect 添加到 dep 对象中，并在 reactive 的 get 方法中收集依赖
* 使用 trigger 触发更新，遍历 dep，触发相应的 effect 函数，可以在 reactive 的 set 方法和 deleteProperty 中触发更新