响应式系统reactivity
前言
今天我们一起学习下vue3.0代码核心之reactivity
一、Vue3响应式系统简介
Vue响应式系统的核心依然是对数据进行劫持,只不过Vue3采样点是Proxy类,而Vue2采用的是Object.defineProperty()。Vue3之所以采用Proxy类主要有两个原因:
- 可以提升性能,由于 Object.defineProperty 只能对属性进行劫持,需要遍历对象的每个属性,如果属性值也是对象,则需要深度遍历。而 Proxy 直接代理对象,不需要遍历操作。
- 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