vue2计算属性

<template>
  <div>
    <p>Original message: "{{ message }}"</p>
    <p>Computed reversed message: "{{ reversedMessage }}"</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  computed: {
    // 计算属性用于声明依赖于其他响应式数据的值，并自动更新
    reversedMessage() {
      // 这里的计算属性会监听 `message` 的变化，并在 `message` 变化时重新计算
      return this.message.split('').reverse().join('')
    }
  }
}
</script>

解释说明：

• data：定义了组件的初始状态，这里有一个 message 属性，其值为 'Hello Vue!'。
• computed：定义了计算属性。reversedMessage 是一个计算属性，它依赖于 message 的值。每当 message 发生变化时，reversedMessage 会自动重新计算并返回反转后的字符串。
• 模板部分：展示了原始的 message 和通过计算属性得到的反转后的 message。

计算属性的好处是它会基于它的依赖进行缓存，只有当依赖的数据发生变化时才会重新计算，因此比普通的方法更高效。