# vue3.0_homework

**Repository Path**: mxydl2009/vue3.0_homework

## Basic Information

- **Project Name**: vue3.0_homework
- **Description**: Vue.js 3.0 Composition APIs 和 原理剖析的作业仓库
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-01-05
- **Last Updated**: 2021-01-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

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

- 性能提升主要通过以下几个方面体现：
  - 响应式系统升级
    - 使用Proxy对象重写响应式系统（可以拦截到属性的新增、删除等等，不再额外处理）
      - 监听动态新增属性
      - 监听删除的属性
      - 监听数组的索引和length属性
  - 编译优化
    - vue2中，标记了静态根节点，来优化虚拟DOM的diff过程
    - vue3中，标记和提升了所有的静态根节点，diff的时候，只需要对比动态节点内容
      - Fragment（需要升级vetur插件才可以支持），等同于React的Fragment，不再需要让template中拥有唯一的根节点
      - 提升了静态节点到render函数之外，只会在初始化的时候调用一次，之后则使用调用结果即可
      - Patch Flag：在diff过程中，通过Patch Flag标志位来优化diff过程
      - 缓存事件处理函数：将事件处理函数缓存起来
  - 源码体积的优化

    - 移除不常用的API，如inline-template、filter等
    - Tree-shaking支持


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

- Options API在开发复杂组件时，同一功能的逻辑代码会被拆分到不同的选项中（例如不同的生命周期函数中，实际上这些生命周期函数中的代码同属于一个功能逻辑）
- Composition API是基于函数的API，补充Options API的劣势，将同一功能的代码封装到一个函数中，避免拆分到不同的生命周期函数导致维护困难。


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

  - Proxy是ES6规范新增的对象，同样都是数据劫持操作，Proxy相比Object.defineProperty而言更加强大，支持的劫持操作更多，例如Proxy可以监听对象动态地增加和删除属性、可以监听到数组的索引和length属性的变化等等


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

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

    - Fragment（需要升级vetur插件才可以支持），等同于React的Fragment，不再需要让template中拥有唯一的根节点
    - 提升了静态节点到render函数之外，只会在初始化的时候调用一次，之后则使用调用结果即可
    - Patch Flag：在diff过程中，通过Patch Flag标志位来优化diff过程
    - 缓存事件处理函数：将事件处理函数缓存起来

5. Vue.js 3.0 响应式系统的实现原理
  - 组件mount时，执行reactive函数来初始化组件实例的Proxy对象。
  - reactive函数执行时，将传入的target对象通过Proxy进行数据劫持。
  - 代理的get时会调用track函数，set时会调用trigger函数，分别对应依赖收集和触发更新。
  - 组件在render阶段，视图读取数据时触发get陷阱，因此track函数执行，记录对应的ReactiveEffect即依赖收集。
  - 数据变更时触发set陷阱，因此trigger函数执行，遍历调用track收集的对应数据的ReactiveEffect，将对应的组件中的数据更新。