使用Vue3组件的计算属性

计算属性在Vue.js的computed选项中定义，它可以在模板上进行双向数据绑定以展示出结果或者进行其他处理。

通常用户会在模板中定义表达式，非常便利，Vue.js的设计初衷也是用于简单运算。但是在模板中放入太多的逻辑，会让模板变得臃肿且难以维护。例如：

<div id="app">

    { {message.split('').reverse().join('')}}

</div>

上面的插值语法中的表达式调用了3个方法来实现字符串的反转，逻辑过于复杂，如果在模板中还要多次使用此处的表达式，就更加难以维护了，此时应该使用计算属性。

计算属性比较适合对多个变量或者对象进行处理后返回一个结果值，也就是说多个变量中的某一个值发生了变化，则绑定的计算属性也会发生变化。

下面是完整的字符串反转的示例，定义一个reversedMessage计算