feat(core): 添加 ref 响应式引用功能

- 实现了 ref 函数用于创建响应式引用 - 添加了 RefImpl 类来管理引用值的响应式行为 - 集成了 trackRefValue 函数进行依赖追踪 - 扩展了 vue 包的导出以包含 ref 功能 - 在 shared 包中添加了 isObject 工具函数 - 创建了 toReactive 辅助函数用于对象响应式转换 - 新增 ref.html 示例文件展示 ref 使用方法 - 移除了旧的 reactive-test.html 示例文件
2026-02-05 21:57:55 +08:00
parent 434bf946c5
commit 7fc2292d4b
7 changed files with 74 additions and 20 deletions
--- a/packages/vue/examples/reactivity/reactive-test.html
+++ b/packages/vue/examples/reactivity/reactive-test.html
@@ -1,19 +0,0 @@
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Document</title>
-    <script src="../../dist/vue.js"></script>
-</head>
-<body>
-<div id="app">
-    <p id="p1"></p>
-    <p id="p2"></p>
-</div>
-</body>
-<script>
-    const { reactive } = Vue
-    const obj=reactive('张三')//不能接收简单数据类型
-    console.log(obj)
-</script>
-</html>
--- a/packages/vue/examples/reactivity/ref.html
+++ b/packages/vue/examples/reactivity/ref.html
@@ -0,0 +1,23 @@
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Document</title>
+  <script src="../../dist/vue.js"></script>
+</head>
+<body>
+<div id="app"></div>
+</body>
+<script>
+  const { ref,effect } = Vue
+  const obj=ref({
+    name:'张三'
+  })
+  effect(()=>{
+    document.querySelector('#app').innerText=obj.value.name
+  })
+  setTimeout(()=>{
+    obj.value.name='李四'
+  },2000)
+</script>
+</html>
--- 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'