feat(watch): 实现watch功能并完善响应式系统

- 新增apiWatch.ts实现watch功能，支持immediate和deep选项 - 扩展ReactiveEffect类添加stop方法用于停止监听 - 导出ReactiveEffect和isReactive函数供外部使用 - 添加ReactiveFlags枚举和IS_REACTIVE标识符 - 在reactive对象上添加__v_isReactive标识 - 导出EMPTY_OBJ常量用于默认参数 - 添加watch功能到Vue入口文件 - 创建watch.html示例验证监听功能正常工作
2026-02-25 22:15:42 +08:00
parent 4a71105e28
commit b9a9c52333
8 changed files with 103 additions and 4 deletions
--- a/packages/vue/examples/reactivity/watch.html
+++ b/packages/vue/examples/reactivity/watch.html
@@ -0,0 +1,26 @@
+<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 { reactive,watch } = Vue
+  const obj=reactive({
+    name:'张三'
+  })
+
+  watch(obj,(value,oldValue)=>{
+    console.log('watch 监听被触发---value',value);
+  },{
+    immediate:true
+  })
+  setTimeout(()=>{
+    obj.name='李四'
+  },2000)
+</script>
+</html>
--- a/packages/vue/src/index.ts
+++ b/packages/vue/src/index.ts
@@ -1,2 +1,2 @@
 export { reactive, effect, ref, computed } from '@vue/reactivity'
-export { queuePreFlushCb } from '@vue/runtime-core'
+export { queuePreFlushCb, watch } from '@vue/runtime-core'