Vue2迁移到Vue3：（四）computed

对比两个示例代码，很容易看出写法的改变：Vue 3 中的计算属性的写法变为使用 computed 函数，直接接受一个函数作为参数，函数内部可以访问响应式引用的值，并返回计算的结果。

一、Vue2

var vm = new Vue({
    el: '#example',
    data: {
        message: 'Hello'
    },
    computed: {
        // 计算属性的 getter
        reversedMessage: function () {
            // `this` 指向 vm 实例
            return this.message.split('').reverse().join('')
        }
    }
})


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

二、Vue3

<script setup>
import { computed, ref } from 'vue'
var message = ref('Hello')
const reversedMessage = computed(() => {
  return message.value.split('').reverse().join('')
})
</script>

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