响应式数据无独立生命周期，依附于组件实例：created后就绪，mounted后绑定dom，unmounted时自动清理；vue2用object.defineproperty，vue3用proxy实现响应式。
Vue 的响应式数据本身没有独立的“生命周期”，它依附于组件实例的生命周期而存在，其核心是追踪依赖、缓存计算、按需更新。真正有明确阶段的是组件实例（vm）的生命周期，而响应式数据在其中持续被监听、触发和回收。
响应式数据如何被创建和劫持
Vue 在初始化阶段（beforeCreate → created）对 data、props、computed 等选项中的对象属性进行响应式处理：
- Vue 2 使用
Object.defineProperty为每个属性定义 getter/setter；Vue 3 则用Proxy拦截整个对象操作，支持新增/删除属性的响应式 - getter 负责依赖收集：当模板或 computed 访问某个响应式字段时，Vue 自动将当前计算任务（如渲染函数或 computed 函数）标记为该字段的“订阅者”
- setter 负责通知更新：一旦赋值，就触发所有依赖它的 watcher 或 effect 重新执行
响应式数据何时开始工作
响应式能力在 created 钩子之后才完全就绪：
- beforeCreate 中，data 还未被处理，访问 this.message 会是 undefined
- created 中，this.message 已是响应式代理，修改它会触发更新，但此时 DOM 尚未生成，不能操作 $el
- mounted 后，响应式数据与真实 DOM 绑定完成，视图可随数据变化自动刷新
响应式数据何时停止响应
响应式关联会在组件卸载时被自动清理，避免内存泄漏：
- beforeUnmount 中，响应式数据仍可读写，watch 和 computed 依然有效
- unmounted 中，所有依赖关系已被 Vue 解绑：watcher 被清除、effect 被 stop、ref/computed 的响应式连接中断
- 若手动使用
watch或effect，未显式调用stop()，则可能残留监听，尤其在异步逻辑中
computed 和 watch 的响应式行为差异
二者都依赖响应式系统，但触发时机和用途不同：
- computed 是被动派生：只在依赖变更且被访问时才重新求值，结果带缓存，适合同步数据加工（如格式化、拼接）
- watch 是主动响应：监听指定数据变化后立即执行回调，支持异步、防抖、deep 深监听，适合副作用操作（如发请求、更新非响应式库）
- watch 默认不执行初始回调；加
immediate: true可在创建时立刻触发一次
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
