Vue 3 的模板更新基于依赖追踪，非响应式变量本身不会触发重渲染，但当它与响应式变量共存于同一渲染上下文时，会因响应式变量引发的整块组件重渲染而被动同步更新——这并非其自身响应，而是模板重新求值的结果。
vue 3 的模板更新基于依赖追踪，非响应式变量本身不会触发重渲染，但当它与响应式变量共存于同一渲染上下文时，会因响应式变量引发的**整块组件重渲染**而被动同步更新——这并非其自身响应，而是模板重新求值的结果。
在 Vue 3 中，ref()、reactive() 等 API 创建的响应式对象会被编译器和运行时系统自动追踪依赖。每当其值变更，Vue 会触发对应组件的 re-render（重渲染） ——注意：这是组件级而非属性级的更新。也就是说，只要组件内任一被追踪的响应式变量发生变化，整个 <template> 就会重新执行插值表达式（如 {{ noneReactiveVariable }}），此时读取的是当前作用域中 noneReactiveVariable 的最新值（即使它本身非响应式）。
✅ 正确理解：非响应式变量 ≠ 模板不可见，而是「不驱动更新」
let noneReactiveVariable = 'initial'
const reactiveVariable = ref('reactive')
// ✅ 模板中同时使用两者：
// <div>{{ reactiveVariable }}</div>
// <div>{{ noneReactiveVariable }}</div>
// → 点击后 reactiveVariable 变更 → 组件重渲染 → 重新读取 noneReactiveVariable 当前值 → 显示新值❌ 常见误解：以为非响应式变量“被 Vue 响应化了”
它从未被代理或劫持，只是恰好在重渲染时被重新求值。验证方式很简单：
// 修改 noneReactiveVariable 后不触发任何响应式变更 noneReactiveVariable = 'updated manually' // ✅ 控制台可见赋值成功 console.log(noneReactiveVariable) // 'updated manually' // ❌ 但若模板中只有它（无其他响应式依赖），DOM 不会更新！
? 关键场景对比分析
| 场景 | 模板结构 | noneReactiveVariable 是否更新？ | 原因 |
|---|---|---|---|
| 场景1 | 同时渲染 {{ reactiveVariable }} 和 {{ noneReactiveVariable }} | ✅ 更新（看似“联动”） | reactiveVariable 触发组件重渲染，模板整体重求值 |
| 场景2 | 仅渲染 {{ noneReactiveVariable }} | ❌ 不更新（即使手动赋值） | 无响应式依赖 → 无 re-render 触发 → 插值永不重新执行 |
| 场景3 | noneReactiveVariable 在 setInterval 中持续修改，但模板含 {{ reactiveVariable }} | ✅ 持续更新（错觉“自动响应”） | reactiveVariable 未变？仍可能因其他响应式变更（如 props、computed）导致重渲染；或 setInterval 配合 clickBtn 间接触发 |
? 补充说明：nextTick() 不触发更新，它只是在 DOM 批量更新完成后执行回调。无论 noneReactiveVariable 是否变化，只要组件没重渲染，{{ noneReactiveVariable }} 就不会刷新。
⚠️ 注意事项与最佳实践
- 永远不要依赖非响应式变量实现视图更新：它不可靠且难以调试。
- 如需动态值，请统一使用 ref() 或 reactive()：
const noneReactiveVariable = ref('non reactive') // ✅ 正确做法 // 或 const state = reactive({ noneReactiveVariable: 'non reactive' }) - 若必须使用普通变量（如缓存计算结果），请确保它不直接参与模板渲染，或通过 computed 封装为响应式：
const cachedValue = 'expensive result' const derived = computed(() => cachedValue + Date.now()) // ✅ 可响应
? 总结
非响应式变量在 Vue 模板中的“更新”本质是组件重渲染带来的副作用，而非其自身具备响应能力。Vue 的响应式系统只负责触发重渲染，而模板引擎负责重新执行所有插值表达式。理解这一机制，能避免误判数据流、写出更可维护的代码，并精准定位渲染异常根源。
立即学习“前端免费学习笔记（深入）”；
