响应式数据变化直接触发的钩子只有beforeUpdate和onUpdated（Vue 3）或updated（Vue 2），前者在DOM重绘前执行，后者在重绘完成后执行；created、mounted等与组件存在状态相关的钩子仅执行一次，不因响应式变化而重复触发。
响应式数据变化本身不会触发 created、mounted 或 unmounted 这类与组件“存在状态”相关的钩子；它主要驱动的是更新阶段的钩子——beforeUpdate 和 onUpdated（Vue 3）或 updated（Vue 2），且仅在该组件的模板中实际使用了这些响应式数据时才会触发。
哪些钩子会被响应式变化直接触发？
只有两个钩子是响应式系统变更的直接结果：
- beforeUpdate：在 Vue 开始重新渲染 DOM 之前调用，此时响应式数据已更新，但视图尚未重绘。适合记录变更前的 DOM 状态（如滚动位置、焦点元素）。
- onUpdated（Vue 3）或 updated（Vue 2）：在 DOM 重新渲染完成后调用，此时新数据已反映在页面上。适合执行依赖新 DOM 结构的操作，比如调整 canvas 尺寸、调用第三方库的 resize 方法。
为什么 created/mounted 不会被响应式变化再次调用？
这两个钩子只在组件生命周期的固定节点执行一次：
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
- created 在响应式系统初始化完毕后立即运行，仅发生一次，与后续数据变化无关。
- mounted 在首次 DOM 挂载完成时触发，也不响应数据更新。即使 data 里某个值变了十次，mounted 也不会再执行。
响应式变化如何间接影响其他钩子？
虽然不直接调用，但数据变化可能引发条件渲染或组件销毁/重建，从而触发相关钩子：
立即学习“前端免费学习笔记（深入）”；
- v-if 控制的子组件：当响应式变量从 true 变为 false，会触发子组件的 beforeUnmount 和 onUnmounted；再变回 true，则重新走一遍 setup → created → mounted 流程。
- key 强制重置：给组件设置动态 key（如 :key="someId"），当 key 改变时，旧组件被卸载（触发 unmount 钩子），新组件被创建（触发 create/mount 钩子）。
注意事项：避免在更新钩子中引发循环
在 onUpdated 或 updated 中修改响应式数据，会再次触发更新流程，可能导致无限循环：
- ❌ 错误示例：onUpdated(() => { count.value++ }) —— 每次更新都加 1，持续触发更新。
- ✅ 正确做法：只读取数据、操作 DOM 或调用无副作用方法；如需修改状态，应加条件判断或使用 watch 显式监听。
