# fed-e-task-03-05

**Repository Path**: D-Rose/fed-e-task-03-05

## Basic Information

- **Project Name**: fed-e-task-03-05
- **Description**: Vue.js 3.0 Composition APIs 及 3.0 原理剖析
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

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

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# fed-e-task-03-05

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

+ 响应系统升级，使用Proxy对象重写响应式系统，可以直接监听新增属性，删除属性，数组索引和length属性操作等
+ 编译优化 标记和提升所有静态根节点，diff的时候只需要对比动态节点内容
+ 优化打包体积，移除一些不常用API，使用Tree-shaking 只会打包使用的API

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

+ Options API 包含义哥描述组件选项（data、methods、props等）的对象，开发复杂组件，同一个功能逻辑的代码被拆分到不同选项，不易于开发效率与阅读
+ Composition 是基于函数的API，可以灵活的组织组件逻辑，更易于维护和阅读，有利于提取和封装公共逻辑

### 3、Proxy 相对于 Object.defineProperty 有哪些优点？
+ Proxy 可以监听动态新增的属性
+ Proxy 可以监听删除属性
+ Proxy 可以监听数组的索引和length属性 
+ Proxy 代理的是对象，而 Object.defineProperty 代理的是对象的属性
+ Proxy 是 ES6 特性，性能由浏览器负责优化，而 Object.defineProperty 是 ES5 特性，性能自己优化

### 4、Vue 3.0 在编译方面有哪些优化？
+ vue3.0中标记和提升所有的静态根节点，diff的时候只需要对比动态节点内容
+ Framents(升级vetur插件) 
+ 静态提升节点
+ 缓存事件处理函数，减少不必要更新操作

### 5、Vue.js 3.0 响应式系统的实现原理？
+ vue3.0中使用proxy重写响应式系统，主要由以下几个核心函数组成：

    + reactive：将普通对象转换成Proxy响应式对象
    + effect：访问响应式对象属性时去收集依赖
    + track：收集依赖
    + trigger： 更新依赖函数
    + ref： 将基本数据转换为响应式对象
    + toRefs：将reactive()创建出来的响应式对象，转换为普通对象，只不过这个对象上的每个属性节点，都是ref()类型的响应式数据
    + computed：计算属性