Vue模板Mustache中调用方法输出值异常及递归更新警告问题求解

递归更新警告触发原因 #

• Vue 组件渲染时会自动收集模板中用到的所有响应式变量作为渲染依赖，只要依赖发生变更，就会触发组件重新渲染。
• 你在模板插值内调用的 move() 方法存在副作用：内部执行了 this.count++ 操作修改了响应式变量 count，直接触发了如下死循环逻辑：
  1. 首次渲染：先读取 count 值渲染第一个插值，随后调用 move() 读取count并执行自增，count值发生变更
  2. count作为渲染依赖变更，触发组件重新渲染
  3. 重新渲染时再次执行两个插值逻辑，再次调用move()修改count，再次触发渲染，无限循环
• Vue 内置了无限渲染防护机制，检测到递归更新次数超过阈值后会强制打断循环，同时抛出对应的递归更新警告。

输出为104的原因 #

• 初始count值为3，每次渲染循环都会执行1次count自增操作，Vue 默认的最大递归更新防护阈值为100次，累加后最终count自增到104时防护机制触发，循环停止。
• 最后一次渲染时，模板内的两个插值读取的都是最终修改后的count值104，因此两个插值都输出104，不符合预期。

修复方案 #

不要在模板插值内执行任何会修改响应式变量的操作，模板插值应当仅做无副作用的纯计算输出：

• 如果需要调用move()修改count值，请将方法调用放在事件回调（比如@click="move"）中，不要直接写在插值里。
• 如果仅需要返回count+1的结果不修改原值，可以将move改为无副作用的纯方法：

methods: {
  move() {
    return this.count + 1
  }
}

内容的提问来源于stack exchange，提问作者Gabriel Lee