# part3-module5

**Repository Path**: ren_wei_1/part3-module5

## Basic Information

- **Project Name**: part3-module5
- **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-12-13
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue3.0性能提升主要是通过哪几方面体现的

1. 首先是静态树提升，静态不会的改变的标签会被提升到render函数之外，这样全局只会创建一次，每次更新的时候，这些静态书都不会参与render
2. diff算法的优化，vue3中新增了静态标记，当进行虚拟节点对比的时候只会对比带有patch flag的节点
3. 事件侦听器缓存，对于dom绑定的事件，直接缓存起来进行复用



# Vue3.0所采用的Composition Api和Vue2.x使用的Options Api有什么区别

1. Options Api

   我所理解的options api 写法有点类似于写配置文件的写法，比如数据要定义在data中，方法要定义在methods中，这样会导致后续的代码比较分散，看起来也比较吃力，尤其是当一个单文件组件比较大的时候，逻辑上理解也不方便

2. Composition Api

   composition api的写法相较于options api来说就要好很多，同一个功能的数据，方法等都写在一起，就类似于我们把一个功能全部写在一个function里面，然后我们要看逻辑的实话，直接看这个function里面的逻辑即可，这样可以提高代码的可读性和可维护性

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

1. proxy可以监听数组的变化，但是Object.defineProperty不可以
2. proxy可以劫持整个对象，但是Object.defineProperty不可以，除非一开始就遍历所有，所以proxy可以监听到属性的增加和减少，但是Object.defineProperty不可以（这就是Vue2.x中直接增加属性会导致不是响应式数据的原因）
3. proxy可以劫持的操作相对于Object.defineProperty来说更多



# Vue3.0在编译方面有哪些优化

1. 在编译阶段对静态模板进行分析，给静态节点打上标记（或者状态提升），在后续diff的过程中，不对静态节点进行diff，从而提升性能 
2. 对绑定的事件进行缓存复用



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

##### 1. reactive

该函数接收一个参数，首先我们判断这个参数是不是对象，如果不是对象的话，直接返回。然后我们new 一个Proxy对象，对于传入的参数进行劫持，并劫持里面的get set 和deleteProperty方法

get方法：

- 收集依赖（track）
- 调用Reflect.get方法来获取值
- 如果Reflect.get方法返回的是一个对象，那么就再次调用reactive方法并将返回的对象传入
- 然后返回Reflect.get方法返回的结果

set方法：

- 首先我们要判断传入的值和老的值是否相等
- 如果相等的话，我们就把传入的值赋给相应的属性，然后调用trigger来更新
- 最后返回成功还是失败的结果

deleteProperty方法

- 如果对象中包含要删除的属性，并且删除属性成功的话，我们就调用trigger进行更新
- 返回proxy对象

##### 2. effect

该函数接受一个函数callback作为参数，首先，我们需要把这个callback赋值给activeEffect，然后调用这个callback函数。由于callback函数中会调用，如果callback中有对数据的访问，这时候就会去触发get中的请求，从而收集了依赖，最后再把acticveEffect置为null

##### 3. track

- track中接收两个参数，target和key
- 首先判断是否存在activeEffect，如果没有说明没有创建依赖，直接返回
- 如果存在，然后判断在targetMap集合中是否存在target，有就赋值给depsMap,如果不存在，则在target集合中新建一个target为key，value为new Map()的值，并将new Map赋值给depsMap
- 然后判断depsMap中是否存在key属性的对象，有的话直接复制给deps，如果没有的话，我们在targetMap中新建一个key为key，value为new Set()的值，并将new Set复制给deps
- 在deps中把activeEffect加进去

##### 4. trigger

- 这个函数接受两个参数，target和key
- 首先判断targetMap中是否存在target属性，如果存在就赋值给depsMap，如果不存在就直接返回
- 然后从depsMap中取出key属性的值，如果存在就遍历这个set，并调用所有的effect方法