为什么Vue不对模板中的方法调用结果进行缓存？

为什么Vue没有实现模板中方法调用结果的缓存 #

• 参数不确定导致缓存成本过高：计算属性本质是无参的派生状态，依赖固定且可以被响应式系统精准追踪。但方法支持传入任意参数，模板中可能出现{{ calcDiscount(item, userLevel, activityId) }}这类多参数调用，如果要做缓存，需要基于所有入参生成唯一缓存键，还要处理参数是引用类型的情况（对象/数组的键生成成本高），同时还要维护缓存的过期、清理逻辑，额外开销远大于缓存带来的收益。
• 非响应式依赖无法被追踪：计算属性的使用场景默认是完全基于响应式状态做派生，而方法可以包含任意逻辑，比如调用Date.now()、Math.random()、读取全局变量window.innerWidth、调用外部非响应式状态等，这些值的变更不会被Vue的响应式系统捕获，如果对方法返回值做缓存，会导致值永久停留在第一次执行的结果，出现无法定位的逻辑错误。
• 语义边界的设计考量：Vue的设计中computed专门用来做「响应式、可缓存的派生状态」，methods用来做「任意可执行逻辑」，两者语义明确拆分，降低开发者的理解和维护成本。如果给方法加上缓存能力，会模糊两者的边界，反而导致开发者滥用，写出更多不易维护的代码。

需要方法在每次渲染周期都重新求值的常见场景 #

方法默认不缓存正是为了适配这些刚需场景：

1. 依赖非响应式动态值的逻辑，比如获取当前时间、生成随机数、读取未被封装为响应式的全局状态：

methods: {
  // 展示当前实时时间，缓存会导致时间不再更新
  getNowTime() {
    return new Date().toLocaleTimeString()
  },
  // 每次渲染随机展示一条运营提示，缓存会导致提示固定
  getRandomTip() {
    const tips = ['多刷新有惊喜', '今日签到有福利', '邀请好友得优惠券']
    return tips[Math.floor(Math.random() * tips.length)]
  }
}

2. 列表动态计算场景：针对长列表的每一项做计算，不可能为每一个列表项提前声明单独的计算属性，使用{{ calcItemTotal(item) }}传参调用是最灵活的实现方式，且大部分场景下计算开销远低于缓存维护开销。
3. 附带执行副作用的逻辑：虽然不推荐在渲染类方法中加副作用，但部分场景下需要在渲染时执行埋点上报、日志打印等逻辑，每次渲染都执行才能满足统计需求。
4. 依赖临时渲染上下文的逻辑：比如方法内部依赖每次渲染才会生成的临时变量、插槽上下文等，缓存会导致逻辑异常。

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