diff --git a/packages/reactivity/src/index.ts b/packages/reactivity/src/index.ts index 57ad7ec..7a869fe 100644 --- a/packages/reactivity/src/index.ts +++ b/packages/reactivity/src/index.ts @@ -1,2 +1,3 @@ export { reactive } from './reactive' export { effect } from './effect' +export { ref } from './ref' diff --git a/packages/reactivity/src/reactive.ts b/packages/reactivity/src/reactive.ts index 645217d..2ed7ec0 100644 --- a/packages/reactivity/src/reactive.ts +++ b/packages/reactivity/src/reactive.ts @@ -1,4 +1,5 @@ import { mutableHandlers } from './baseHandlers' +import { isObject } from '@vue/shared' /** * 响应性Map缓存对象 @@ -39,3 +40,6 @@ function createReactiveObject( proxyMap.set(target, proxy) return proxy } + +export const toReactive = (value: T): T => + isObject(value) ? reactive(value as object) : value diff --git a/packages/reactivity/src/ref.ts b/packages/reactivity/src/ref.ts new file mode 100644 index 0000000..c7c392f --- /dev/null +++ b/packages/reactivity/src/ref.ts @@ -0,0 +1,42 @@ +import { createDep, Dep } from './dep' +import { toReactive } from './reactive' +import { activeEffect, track, trackEffects } from './effect' + +export interface Ref { + value: T +} + +export function ref(value?: unknown) { + return createRef(value, false) +} +function createRef(rawValue: unknown, shallow: boolean) { + if (isRef(rawValue)) { + return rawValue + } + return new RefImpl(rawValue, shallow) +} +class RefImpl { + private _value: T + public dep?: Dep = undefined + public readonly __v_isRef = true + constructor( + value: T, + public readonly __v_isShallow: boolean + ) { + this._value = __v_isShallow ? value : toReactive(value) + } + get value() { + trackRefValue(this) + return this._value + } + set value(newValue) {} +} +export function trackRefValue(ref) { + if (activeEffect) { + trackEffects(ref.dep || (ref.dep = createDep())) + } +} +//是否为ref +export function isRef(r: any): r is Ref { + return !!(r && r.__v_isRef === true) +} diff --git a/packages/shared/src/index.ts b/packages/shared/src/index.ts index f53785f..f020f62 100644 --- a/packages/shared/src/index.ts +++ b/packages/shared/src/index.ts @@ -1,2 +1,5 @@ //判断是否为一个数组 export const isArray = Array.isArray + +export const isObject = (val: unknown) => + val !== null && typeof val === 'object' diff --git a/packages/vue/examples/reactivity/reactive-test.html b/packages/vue/examples/reactivity/reactive-test.html deleted file mode 100644 index 2ca9db2..0000000 --- a/packages/vue/examples/reactivity/reactive-test.html +++ /dev/null @@ -1,19 +0,0 @@ - - - - - Document - - - -
-

-

-
- - - \ No newline at end of file diff --git a/packages/vue/examples/reactivity/ref.html b/packages/vue/examples/reactivity/ref.html new file mode 100644 index 0000000..b3dd4c7 --- /dev/null +++ b/packages/vue/examples/reactivity/ref.html @@ -0,0 +1,23 @@ + + + + + Document + + + +
+ + + \ No newline at end of file diff --git a/packages/vue/src/index.ts b/packages/vue/src/index.ts index 9fd7656..015eeb1 100644 --- a/packages/vue/src/index.ts +++ b/packages/vue/src/index.ts @@ -1 +1 @@ -export { reactive, effect } from '@vue/reactivity' +export { reactive, effect, ref } from '@vue/reactivity'