Vue 3模板内使用counter++自增为何显示101而非1？

• 你写在模板插值里的{{counter++}}是带副作用的表达式：后置自增语法的执行逻辑是先返回当前counter的瞬时值，再把counter本身的值加1，每执行一次，响应式变量counter就会被实际修改一次，而非仅在渲染时做临时计算。
• 模板表达式的执行次数远高于单次渲染的预期：
  1. 组件首次挂载时会执行第一轮渲染，这是第一次运行counter++，执行后counter从0变为1；由于渲染过程中修改了响应式counter的值，会立刻触发组件的下一轮重渲染。
  2. 每次重渲染都会再次运行counter++，循环执行「渲染→修改counter值→触发新一轮渲染」的流程。
• Vue内置了无限渲染保护机制：当同一个组件连续触发的递归更新次数达到默认上限100次时，框架会主动终止后续渲染流程，避免无限循环导致页面卡死。从初始值0开始累计，到保护机制触发时，counter++已经被执行了101次，最后一次渲染输出的值就是101，这就是页面展示101的直接原因。

• Vue对模板渲染函数的设计约束是：模板中的插值表达式必须是纯计算逻辑，不能包含任何修改组件状态的副作用。因为渲染函数需要支持多轮执行、执行顺序不固定的运行场景，一旦混入状态修改逻辑，就会出现完全不可控的渲染结果。
• 你把状态修改逻辑（counter自增）和渲染展示逻辑（输出counter值）绑定到了同一段插值表达式里，直接违反了这个设计原则，才触发了这个异常渲染循环。

• 移除插值表达式里的副作用，只做纯值渲染：<div>{{ counter }}</div>
• counter的自增逻辑需要放到独立的逻辑块中实现，比如按钮点击事件、生命周期钩子、侦听器等位置，不能直接写在模板插值中。

内容的提问来源于stack exchange，提问作者g-wei xia