vue 组件中computed用法

在 Vue 组件中，computed 是一个计算属性，它会根据依赖的数据动态计算出一个新的值。computed 的用法如下：

<template>
  <div>
    <p>原始值：{{ message }}</p>
    <p>计算属性：{{ reversedMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello World'
    }
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('')
    }
  }
}
</script>

在上面的代码中，我们定义了一个计算属性 reversedMessage，它依赖于 data 中的 message。当 message 发生变化时，reversedMessage 会自动更新。