Vue文本插值是否会监控所有元素？非ref变量为何触发更新及性能疑问

这是个特别典型的Vue响应式系统疑问，很多刚上手的开发者都会踩这个小坑，我来给你把逻辑拆明白：

为什么非ref的staticNumber会更新？ #

其实Vue并没有“监控”这个非响应式的staticNumber变量，问题出在组件的重新渲染机制上：
你的例子里，dynamicNumber是一个响应式的ref，它每秒都会自增，每次变化都会触发组件的整体重新渲染。当组件重新渲染时，Vue会重新执行模板里的所有表达式——不管这个表达式用的是响应式变量还是普通变量。

对应到你的代码：

• 初始渲染时，staticNumber是0，所以第二个h1显示0；
• 1秒后，setTimeout把staticNumber改成了10；
• 紧接着dynamicNumber第一次自增，触发组件重新渲染；
• 这次渲染时，Vue会重新读取staticNumber的当前值（也就是10），所以第二个h1的内容就变了。

简单说：不是Vue盯着staticNumber的变化，而是响应式变量触发了全量渲染，顺带读取了它的最新值。

关于多语言场景的性能顾虑：完全不用过度担心！ #

首先要明确：Vue的渲染优化做得非常到位，即使模板里有大量静态内容，也不会带来明显的性能问题——因为Vue的虚拟DOM diff算法会精准识别出哪些节点是静态的，重新渲染时只会更新真正变化的DOM节点，静态节点的DOM不会有任何改动。

不过如果想进一步优化（或者就是想让静态内容彻底不参与后续渲染），Vue提供了专门的指令：v-once。给静态内容加上这个指令后，Vue只会渲染它一次，之后哪怕组件重新渲染，也不会再处理这个节点：

<template>
  <h1 v-once>{{ phrase.greetings }}</h1> <!-- 彻底静态，不再参与任何后续渲染 -->
  <p>{{ phrase.x_visitors(numberOfVisitors) }}</p> <!-- 正常响应更新 -->
  <p v-once>{{ phrase.site_description }}</p> <!-- 彻底静态 -->
</template>

这样既满足了你的需求，又能把性能拉到最优。

补充一句：Vue的响应式本质 #

Vue的响应式系统是依赖追踪模式：它只会追踪响应式变量的依赖，当这些变量变化时触发组件重新渲染。重新渲染时会计算所有模板表达式，但这一步的开销极低，再加上diff算法的DOM优化，日常场景下完全不用担心性能问题。

备注：内容来源于stack exchange，提问作者CMTV