🎬 岸边的风：个人主页
🔥 个人专栏 :《 VUE 》 《 javaScript 》
⛺️ 生活的理想，就是为了理想的生活 !
目录
- 定义一个对象original，reactive后返回observed，得到结果两个对象的引用不能相同，observed是可响应的，original不可响应，observed得值跟original相同，从这几个特点来看，我们很容易联想到proxy，对proxy还不熟悉同学可以点proxy
test('Object', () => {
const original = { foo: 1 }
const observed = reactive(original)
expect(observed).not.toBe(original)
expect(isReactive(observed)).toBe(true)
expect(isReactive(original)).toBe(false)
// get
expect(observed.foo).toBe(1)
// has
expect('foo' in observed).toBe(true)
// ownKeys
expect(Object.keys(observed)).toEqual(['foo'])
})
-
原型
test('proto', () => {
const obj = {}
const reactiveObj = reactive(obj)
expect(isReactive(reactiveObj)).toBe(true)
// read prop of reactiveObject will cause reactiveObj[prop] to be reactive
// @ts-ignore
const prototype = reactiveObj['__proto__']
const otherObj = { data: ['a'] }
expect(isReactive(otherObj)).toBe(false)
const reactiveOther = reactive(otherObj)
expect(isReactive(reactiveOther)).toBe(true)
expect(reactiveOther.data[0]).toBe('a')
})
- 定义一个嵌套对象, reactive后嵌套的属性也可以响应
test('nested reactives', () => {
const original = {
nested: {
foo: 1
},
array: [{ bar: 2 }]
}
const observed = reactive(original)
expect(isReactive(observed.nested)).toBe(true)
expect(isReactive(observed.array)).toBe(true)
expect(isReactive(observed.array[0])).toBe(true)
})
-
观察的对象的变更会同步到原始对象
test('observed value should proxy mutations to original (Object)', () => {
const original: any = { foo: 1 }
const observed = reactive(original)
// set
observed.bar = 1
expect(observed.bar).toBe(1)
expect(original.bar).toBe(1)
// delete
delete observed.foo
expect('foo' in observed).toBe(false)
expect('foo' in original).toBe(false)
})
- 给observed设置一个未被观察的值可以响应，看过vue2.x的同学应该都清楚，这个在vue2.x中是不可响应的
test('setting a property with an unobserved value should wrap with reactive', () => {
const observed = reactive<{ foo?: object }>({})
const raw = {}
observed.foo = raw
expect(observed.foo).not.toBe(raw)
expect(isReactive(observed.foo)).toBe(true)
})
- 观察一个已经被observed的observe应该直接返回该observe
test('observing already observed value should return same Proxy', () => {
const original = { foo: 1 }
const observed = reactive(original)
const observed2 = reactive(observed)
expect(observed2).toBe(observed)
})
-
重复观察相同的原始对象直接返回相同的proxy对象
test('observing the same value multiple times should return same Proxy', () => {
const original = { foo: 1 }
const observed = reactive(original)
const observed2 = reactive(original)
expect(observed2).toBe(observed)
})
-
不会污染原始对象
test('should not pollute original object with Proxies', () => {
const original: any = { foo: 1 }
const original2 = { bar: 2 }
const observed = reactive(original)
const observed2 = reactive(original2)
observed.bar = observed2
expect(observed.bar).toBe(observed2)
expect(original.bar).toBe(original2)
})
-
通过
toRaw api可以返回被观察对象的原始对象
test('unwrap', () => {
const original = { foo: 1 }
const observed = reactive(original)
expect(toRaw(observed)).toBe(original)
expect(toRaw(original)).toBe(original)
})
test('should not unwrap Ref<T>', () => {
const observedNumberRef = reactive(ref(1))
const observedObjectRef = reactive(ref({ foo: 1 }))
expect(isRef(observedNumberRef)).toBe(true)
expect(isRef(observedObjectRef)).toBe(true)
})
test('should unwrap computed refs', () => {
// readonly
const a = computed(() => 1)
// writable
const b = computed({
get: () => 1,
set: () => {}
})
const obj = reactive({ a, b })
// check type
obj.a + 1
obj.b + 1
expect(typeof obj.a).toBe(`number`)
expect(typeof obj.b).toBe(`number`)
})
- 不能直接被观察的类型
test('non-observable values', () => {
const assertValue = (value: any) => {
reactive(value)
expect(
`value cannot be made reactive: ${String(value)}`
).toHaveBeenWarnedLast()
}
// number
assertValue(1)
// string
assertValue('foo')
// boolean
assertValue(false)
// null
assertValue(null)
// undefined
assertValue(undefined)
// symbol
const s = Symbol()
assertValue(s)
// built-ins should work and return same value
const p = Promise.resolve()
expect(reactive(p)).toBe(p)
const r = new RegExp('')
expect(reactive(r)).toBe(r)
const d = new Date()
expect(reactive(d)).toBe(d)
})
markRaw可以给将要被观察的数据打上标记，标记原始数据不可被观察
test('markRaw', () => {
const obj = reactive({
foo: { a: 1 },
bar: markRaw({ b: 2 })
})
expect(isReactive(obj.foo)).toBe(true)
expect(isReactive(obj.bar)).toBe(false)
})
- 被freeze的数据不可观察
test('should not observe frozen objects', () => {
const obj = reactive({
foo: Object.freeze({ a: 1 })
})
expect(isReactive(obj.foo)).toBe(false)
})
shallowReactive
只为某个对象的私有（第一层）属性创建浅层的响应式代理，不会对“属性的属性”做深层次、递归地响应式代理
- 属性的属性不会被观察
test('should not make non-reactive properties reactive', () => {
const props = shallowReactive({ n: { foo: 1 } })
expect(isReactive(props.n)).toBe(false)
})
shallowReactive后的proxy的属性再次被reactive可以被观察
test('should keep reactive properties reactive', () => {
const props: any = shallowReactive({ n: reactive({ foo: 1 }) })
props.n = reactive({ foo: 2 })
expect(isReactive(props.n)).toBe(true)
})
iterating不能被观察
test('should not observe when iterating', () => {
const shallowSet = shallowReactive(new Set())
const a = {}
shallowSet.add(a)
const spreadA = [...shallowSet][0]
expect(isReactive(spreadA)).toBe(false)
})
get到的某个属性不能被观察
test('should not get reactive entry', () => {
const shallowMap = shallowReactive(new Map())
const a = {}
const key = 'a'
shallowMap.set(key, a)
expect(isReactive(shallowMap.get(key))).toBe(false)
})
foreach不能被观察
test('should not get reactive on foreach', () => {
const shallowSet = shallowReactive(new Set())
const a = {}
shallowSet.add(a)
shallowSet.forEach(x => expect(isReactive(x)).toBe(false))
})Vue3中响应数据核心是 reactive ， reactive 中的实现是由 proxy 加 effect 组合，先来看一下 reactive 方法的定义
export function reactive<T extends object>(target: T): UnwrapNestedRefs<T>
export function reactive(target: object) {
// if trying to observe a readonly proxy, return the readonly version.
// 如果目标对象是一个只读的响应数据,则直接返回目标对象
if (target && (target as Target).__v_isReadonly) {
return target
}
// 否则调用 createReactiveObject 创建 observe
return createReactiveObject(
target,
false,
mutableHandlers,
mutableCollectionHandlers
)
}
createReactiveObject 创建 observe
// Target 目标对象
// isReadonly 是否只读
// baseHandlers 基本类型的 handlers
// collectionHandlers 主要针对(set、map、weakSet、weakMap)的 handlers
function createReactiveObject(
target: Target,
isReadonly: boolean,
baseHandlers: ProxyHandler<any>,
collectionHandlers: ProxyHandler<any>
) {
// 如果不是对象
if (!isObject(target)) {
// 在开发模式抛出警告，生产环境直接返回目标对象
if (__DEV__) {
console.warn(`value cannot be made reactive: ${String(target)}`)
}
return target
}
// target is already a Proxy, return it.
// exception: calling readonly() on a reactive object
// 如果目标对象已经是个 proxy 直接返回
if (target.__v_raw && !(isReadonly && target.__v_isReactive)) {
return target
}
// target already has corresponding Proxy
if (
hasOwn(target, isReadonly ? ReactiveFlags.readonly : ReactiveFlags.reactive)
) {
return isReadonly ? target.__v_readonly : target.__v_reactive
}
// only a whitelist of value types can be observed.
// 检查目标对象是否能被观察, 不能直接返回
if (!canObserve(target)) {
return target
}
// 使用 Proxy 创建 observe
const observed = new Proxy(
target,
collectionTypes.has(target.constructor) ? collectionHandlers : baseHandlers
)
// 打上相应标记
def(
target,
isReadonly ? ReactiveFlags.readonly : ReactiveFlags.reactive,
observed
)
return observed
}
// 同时满足3个条即为可以观察的目标对象
// 1. 没有打上__v_skip标记
// 2. 是可以观察的值类型
// 3. 没有被frozen
const canObserve = (value: Target): boolean => {
return (
!value.__v_skip &&
isObservableType(toRawType(value)) &&
!Object.isFrozen(value)
)
}
// 可以被观察的值类型
const isObservableType = /*#__PURE__*/ makeMap(
'Object,Array,Map,Set,WeakMap,WeakSet'
)
结语
看到这里我们大概清楚 reactive 是做为整个响应式的入口，负责处理目标对象是否可观察以及是否已被观察的逻辑，最后使用 Proxy 进行目标对象的代理，对 es6 Proxy 概念清楚的同学应该 Proxy 重点的逻辑处理在 Handlers , 接下来我们就一起去看看各种 Handlers
如果你对 Proxy 还不理解，可以点这里学习
