computed与options绑定仅首次加载触发，换函数正常的原因咨询

嗨，这个问题其实戳中了Vue里计算属性（computed）和普通方法最核心的差异——响应式缓存机制在搞事情！

先说说为什么computed只执行一次 #

计算属性的本质是「基于响应式依赖的缓存计算」：

• 它会在首次渲染时执行一次，然后把计算结果缓存起来
• 只有当它依赖的响应式数据（比如data里的变量、props）发生变化时，它才会重新计算并更新缓存
• 如果依赖的响应式数据没动，哪怕你触发了组件重新渲染（比如点击按钮），它也只会直接返回缓存的旧结果，不会再执行函数体

举个直白的例子：如果你的computed函数里没有用到任何响应式变量，或者点击按钮的操作根本没修改它依赖的变量，那它自然不会重新跑一遍。

再看普通函数为什么每次点击都执行 #

你在模板里直接调用的普通方法，规则就简单多了：每次组件重新渲染的时候，它都会被执行一次。
点击按钮时，不管你是修改了data里的列表还是其他数据，都会触发组件重新渲染，所以这个普通方法就会跟着被调用一次。

举个代码例子对比 #

比如你可能写了类似这样的代码：

<template>
  <button @click="addItem">新增条目</button>
  <!-- computed的情况 -->
  <p>{{ countTextComputed }}</p>
  <!-- 普通方法的情况 -->
  <p>{{ countTextMethod() }}</p>
</template>

<script>
export default {
  data() {
    return { items: [] }
  },
  computed: {
    countTextComputed() {
      console.log('computed 执行了')
      return `当前有${this.items.length}条数据`
    }
  },
  methods: {
    countTextMethod() {
      console.log('普通方法 执行了')
      return `当前有${this.items.length}条数据`
    },
    addItem() {
      this.items.push({})
    }
  }
}
</script>

这里点击按钮修改了items，computed依赖的items.length变了，所以它会重新执行；但如果你的computed是返回固定文本（没有依赖任何响应式变量），那不管点多少次按钮，它都只会在页面加载时执行一次，而普通方法每次渲染都会跑。

之前你觉得二者表现一致，应该是误解了computed的特性——它不是用来替代普通方法的，而是用来处理需要基于响应式数据做缓存计算的场景，能避免不必要的重复计算，提升性能。

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