组件重复使用，组件内部方法返回值会覆盖其他组件方法返回值

在 Vue 组件中，如果组件内部的方法返回值被传递给父组件或者其他组件使用，那么可能会出现一个组件的方法返回值覆盖另一个组件的方法返回值的情况。

这是因为在 Vue 中，组件是可以被重复使用的，如果多个组件同时调用了同一个组件的方法，那么这些组件会共享该方法的返回值。

要解决这个问题，一种方法是使用计算属性代替方法，并且在计算属性中使用组件的属性值作为依赖，这样每个组件都会根据自己的属性值计算并返回独立的结果。

例如，以下是一个简单的组件：

<template>
  <div>{{ computedMessage }}</div>
</template>

<script>
export default {
  props: ['message'],
  computed: {
    computedMessage() {
      return this.message.toUpperCase() + '!'
    }
  }
}
</script>

这个组件接收一个 message 属性，并将其转换为大写字母并添加一个感叹号后返回。

如果我们在父组件中多次调用该组件并传递相同的属性值：

<template>
  <div>
    <my-component :message="'Hello'"></my-component>
    <my-component :message="'World'"></my-component>
    <my-component :message="'Vue'"></my-component>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue'

export default {
  components: {
    'my-component': MyComponent
  }
}
</script>

那么在页面中渲染出来的结果会是：

HELLO!
WORLD!
VUE!

因为每个组件都有自己的计算属性 computedMessage，它们之间互不干扰，所以不会出现方法返回值被覆盖的情况。