Vue计算属性未在模板使用却被计算的原因及该行为是否为官方预期

这是Vue官方预期的设计行为，不属于实现副作用，未来版本也不会变更该基础运行逻辑。

原理说明 #

• 你对计算属性「懒执行」的原有认知没有错，但懒执行的核心规则是只有当有活跃的消费者读取计算属性的getter时，才会触发计算并缓存结果，这里的消费者并不局限于模板渲染逻辑。
• watch侦听器的初始化逻辑本身就属于计算属性的合法消费者：当你给某个计算属性配置watcher时，Vue在初始化侦听器阶段会主动读取一次被监听的计算属性值，目的是收集该计算属性依赖的响应式变量，后续依赖更新时才能正确触发侦听器回调。这个读取动作自然会触发计算属性的求值，完全符合懒执行的设计规则。

针对你第二个问题的明确答复 #

如果计算属性被侦听器监听，就已经属于「存在显式调用getter的逻辑」，符合求值触发条件，应当被求值。

示例代码运行逻辑说明 #

你的示例代码如下：

<template>
  <div>
        <button @click="counter++">+1</button>
        {{ counter }}
  </div>
</template>

<script>
export default {
  name: "Main",
  data() {
    return {
      counter: 0,
    };
  },
  computed: {
    notUsedInTemplate() {
      console.log("notUsedInTemplate computed called");
      return this.counter + 1;
    },
  },
  watch: {
    notUsedInTemplate() {
      console.log("notUsedInTemplate watch called");
    },
  },
};
</script>

运行表现完全符合设计预期：

1. 组件初始化时watch先读取notUsedInTemplate，触发计算属性执行，打印notUsedInTemplate computed called
2. 每次点击按钮修改counter时，计算属性的依赖更新，watch需要获取计算属性的最新值判断是否触发回调，因此会再次触发计算属性执行，之后打印watch的回调日志。

如果不需要复用notUsedInTemplate的计算逻辑，直接监听counter即可，避免不必要的计算属性封装。

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