Vue 3 中非响应式变量在模板中“意外更新”的原理与陷阱-js教程-PHP中文网

Vue 3 中非响应式变量在模板中“意外更新”的原理与陷阱

Vue 3 的模板更新基于依赖追踪机制：仅当响应式数据变化时，Vue 才会触发对应 DOM 片段的重新求值；非响应式变量本身不会触发更新，但若其与响应式变量共存于同一渲染上下文（如同一组件、同一次 render 函数执行），它仍会随响应式依赖的更新而“被动重渲染”。

vue 3 的模板更新基于依赖追踪机制：仅当响应式数据变化时， vue 才会触发对应 dom 片段的重新求值；非响应式变量本身不会触发更新，但若其与响应式变量共存于同一渲染上下文（如同一组件、同一次 render 函数执行），它仍会随响应式依赖的更新而“被动重渲染”。

在 Vue 3 的 Composition API 中，ref、reactive 等 API 创建的响应式对象会被 Vue 的 Proxy 代理系统追踪。每当这些响应式变量被读取（如在模板中 {{ reactiveVariable }}），Vue 就会在当前渲染上下文中建立「依赖关系」；一旦其值变更，Vue 便精准标记并刷新所有依赖它的 DOM 节点。

但关键在于：Vue 的更新粒度是组件级别的「最小重渲染单元」——即整个 。这意味着：

✅ 当 reactiveVariable 变更时，Vue 会重新执行整个组件的 render 函数；
✅ 此时 noneReactiveVariable 作为普通 JS 变量，其最新值（无论是否手动修改）会被重新读取并插入到 DOM 中；
❌ 它本身不触发更新，但会被更新所带动——这是「被动重渲染」，而非「响应式更新」。

? 验证示例

<template><button>Click</button>
  <div id="reactive">{{ reactiveVar }}</div>
  <div id="non-reactive">{{ nonReactiveVar }}</div> <!-- 同 render 函数内，随 reactiveVar 更新而重求值 -->
</template><script setup lang="ts">
import { ref } from 'vue'

const reactiveVar = ref('initial')
let nonReactiveVar = 'static at first'

function clickBtn() {
  reactiveVar.value = Date.now().toString()
  nonReactiveVar = 'modified manually' // ✅ 此赋值不会触发更新，但下次 render 会读到新值
}
</script>

点击按钮后，nonReactiveVar 在 DOM 中显示新值，并非因为它变“响应式”了，而是因为整个 template 重新渲染，重新执行了 {{ nonReactiveVar }} 的求值逻辑。

⚠️ 重要区别：依赖存在性决定是否参与重渲染

当模板中仅保留非响应式变量：

Vue-router参考手册

Vue-router参考手册下载

下载

<template><button>Click</button>
  <div>{{ nonReactiveVar }}</div> <!-- 此处无任何响应式依赖 -->
</template><script setup lang="ts">
import { ref } from 'vue'

const reactiveVar = ref('ignored') // ❌ 未在 template 中使用 → 不建立依赖
let nonReactiveVar = 'never updates'

function clickBtn() {
  reactiveVar.value = 'changed' // ✅ 变更，但因未被模板消费，不触发 render
  nonReactiveVar = Date.now().toString() // ✅ 修改变量，但无 re-render → DOM 不变
}
</script>

此时点击按钮，nonReactiveVar 值虽已变更，但因组件未因任何响应式依赖变化而重渲染，DOM 完全不会更新 —— nextTick 的回调仍会执行（它只等待当前微任务队列中的 DOM 更新完成），但它等待的是「零次更新」，因此日志输出不代表 UI 刷新。