data、props 和 computed 在 Vue.js 中都是用于存储数据的，但它们的用途和行为有所不同：

1. data：是 Vue 组件中的响应式数据源，通常用于存储组件内部需要用到的数据。当 data 中的数据发生改变时，视图会自动更新。
2. props：是父组件向子组件传递数据的一种方式。子组件通过 props 接收父组件传递过来的数据，props 中的数据在子组件中是只读的，子组件不能修改 props 中的数据。
3. computed：是计算属性，用于处理一些复杂的逻辑，例如根据多个 data 或 props 的值计算出新的值。computed 的特点是它会缓存计算结果，只有当依赖的 data 或 props 发生改变时，才会重新计算。这使得 computed 在处理性能开销较大的计算时，比直接在 methods 中定义方法更高效。

以下是一些使用 data、props 和 computed 的例子：

一、data

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

在这个例子中，我们在 data 中定义了一个 message 变量，然后可以在 Vue 的模板中使用这个变量，并且是响应式的

二、props

<template>
  <div id="app">
    <child-component :my-message="parentMessage"></child-component>
  </div>
</template>

<script>
import ChildComponent from './components/ChildComponent.vue'

export default {
  name: 'App',
  components: {
    'child-component': ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent'
    }
  }
}
</script>

在这个例子中，我们在父组件（App）中定义了一个名为 parentMessage 的 data 属性，并将其通过 v-bind 指令（简写为 :）传递给了子组件（ChildComponent）的 my-message prop。

然后在 ChildComponent.vue 文件中，我们可以这样定义子组件：

<template>
  <div>
    <p>{{ myMessage }}</p>
  </div>
</template>

<script>
export default {
  props: ['myMessage']
}
</script>

在这个子组件中，我们接收了一个名为 myMessage 的 prop，并在模板中显示它的值。注意，子组件不能修改从父组件接收的 props，否则会在控制台中看到警告。

三、computed

new Vue({
  el: '#app',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName
    }
  }
})

在这个例子中，我们在 computed 中定义了一个 fullName 计算属性，这个计算属性的值是由 data 中的 firstName 和 lastName 计算得出的。当 firstName 或 lastName 发生改变时，fullName 会自动更新。

使用场景

1. data：在组件内部需要使用的数据，可以在 data 中定义。例如，你可能需要一个变量来切换一个元素的显示和隐藏，或者存储用户输入的表单数据。
2. props：当你需要从父组件向子组件传递数据时，可以使用 props。例如，你可能有一个用户列表组件，每个用户的数据都是从父组件传递到子组件的。
3. computed：当你需要根据其他变量计算出一个新的值，并且这个值需要被缓存时，可以使用 computed。例如，你可能有一个购物车组件，需要根据购物车中的商品价格和数量计算出总价，这个总价就可以使用 computed 来计算，因为当商品价格或数量发生变化时，总价需要重新计算，而当它们没有变化时，总价可以直接使用之前计算的结果，无需重新计算。