vue3.0源码核心--响应式系统reactivity

---

前言

今天我们一起学习下vue3.0代码核心之reactivity

---

一、Vue3响应式系统简介

Vue响应式系统的核心依然是对数据进行劫持，只不过Vue3采样点是Proxy类，而Vue2采用的是Object.defineProperty()。Vue3之所以采用Proxy类主要有两个原因:

1. 可以提升性能，由于 Object.defineProperty 只能对属性进行劫持，需要遍历对象的每个属性，如果属性值也是对象，则需要深度遍历。而 Proxy 直接代理对象，不需要遍历操作。
2. Proxy可以实现对整个对象的劫持，而Object.defineProperty()只能实现对对象的属性进行劫持。所以对于对象上的方法或者新增、删除的属性需要手动进行 Observe。也正是因为这个原因，使用 Vue 给 data 中的数组或对象新增属性时，需要使用 vm.$set 才能保证新增的属性也是响应式的。
   

二、ES6 Proxy VS Object.defineProperty

• Object.defineProperty 只能劫持对象的属性，而 Proxy 是直接代理对象。
• Object.defineProperty 对新增属性需要手动进行 Observe。
• Object.defineProperty 阉割导致监听不到数组下标的变化，在 Vue 的实现中，从性能 / 体验的性价比考虑，放弃了这个特性。
• Proxy支持 13 种拦截操作，这是 defineProperty 所不具有的。
• Proxy 兼容性差
  如图所示，Proxy ie兼容性极差，这也是vue3.0不支持ie11的原因之一
  目前并没有一个完整支持 Proxy 所有拦截方法的 Polyfill 方案，有一个 Google 编写的 proxy-polyfill 也只支持了 get、set、apply、construct 四种拦截，可以支持到 IE9+ 和 Safari 6+。
  链接: proxy-polyfill.
  链接: can i use.

三、reactivity构成

1.核心模块

• reactive (将对象转换为响应式对象)
• ref （将基本类型的值转为具有一个value属性的响应式对象）
• computed（计算属性）
• effect(watch依赖的的底层函数)

2.ReactiveFlags

vue3.0的响应式系统ReactiveFlags，用于标记目标对象target（数据源）的一些特性，
通过手动改变ReactiveFlags 可以实现某些业务下的骚操作实现方案（狗头保命）

export const enum ReactiveFlags {
  skip = '__v_skip', 
  isReactive = '__v_isReactive',
  isReadonly = '__v_isReadonly',
  raw = '__v_raw',
  reactive = '__v_reactive',
  readonly = '__v_readonly'
}

// 为目标对象target，即待转化为响应式对象的源对象做标记
interface Target {
  __v_skip?: boolean // 跳过，不对target做响应式处理
  __v_isReactive?: boolean // target是响应式的
  __v_isReadonly?: boolean // target是只读的
  __v_raw?: any // target对应的原始数据源，未经过响应式代理
  __v_reactive?: any // target经过响应式代理后的数据源
  __v_readonly?: any // target经过响应式代理后的只读数据源
}

总结

Vue3响应式系统将Proxy 替换Object.defineProperty，Object.defineProperty 和 Proxy 本质差别是，defineProperty 只能对属性进行劫持，所以出现了需要递归遍历，新增属性需要手动 Observe 的问题。
reactivity 核心模块由 reactive ref computed effect 构成

我们将会再下篇文章详细介绍reactivity构成之核心模块reactive