From 7fc2292d4ba3fa099e6d74e66dfcf2289ad4e61c Mon Sep 17 00:00:00 2001 From: dj <1042039504@qq.com> Date: Thu, 5 Feb 2026 21:57:55 +0800 Subject: [PATCH] =?UTF-8?q?feat(core):=20=E6=B7=BB=E5=8A=A0=20ref=20?= =?UTF-8?q?=E5=93=8D=E5=BA=94=E5=BC=8F=E5=BC=95=E7=94=A8=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 实现了 ref 函数用于创建响应式引用 - 添加了 RefImpl 类来管理引用值的响应式行为 - 集成了 trackRefValue 函数进行依赖追踪 - 扩展了 vue 包的导出以包含 ref 功能 - 在 shared 包中添加了 isObject 工具函数 - 创建了 toReactive 辅助函数用于对象响应式转换 - 新增 ref.html 示例文件展示 ref 使用方法 - 移除了旧的 reactive-test.html 示例文件 --- packages/reactivity/src/index.ts | 1 + packages/reactivity/src/reactive.ts | 4 ++ packages/reactivity/src/ref.ts | 42 +++++++++++++++++++ packages/shared/src/index.ts | 3 ++ .../examples/reactivity/reactive-test.html | 19 --------- packages/vue/examples/reactivity/ref.html | 23 ++++++++++ packages/vue/src/index.ts | 2 +- 7 files changed, 74 insertions(+), 20 deletions(-) create mode 100644 packages/reactivity/src/ref.ts delete mode 100644 packages/vue/examples/reactivity/reactive-test.html create mode 100644 packages/vue/examples/reactivity/ref.html 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'