使用Vue3组件的计算属性
计算属性在Vue.js的computed选项中定义，它可以在模板上进行双向数据绑定以展示出结果或者进行其他处理。
通常用户会在模板中定义表达式，非常便利，Vue.js的设计初衷也是用于简单运算。但是在模板中放入太多的逻辑，会让模板变得臃肿且难以维护。例如：
<div id="app">
{{message.split('').reverse().join('')}}
</div>
上面的插值语法中的表达式调用了3个方法来实现字符串的反转，逻辑过于复杂，如果在模板中还要多次使用此处的表达式，就更加难以维护了，此时应该使用计算属性。
计算属性比较适合对多个变量或者对象进行处理后返回一个结果值，也就是说多个变量中的某一个值发生了变化，则绑定的计算属性也会发生变化。
下面是完整的字符串反转的示例，定义一个reversedMessage计算属性，在input输入框中输入字符串时，绑定的message属性值发生变化，触发reversedMessage计算属性，执行对应的函数，最终使字符串反转。
【例3.5】 使用计算属性（源代码\ch03\3.1.html）。
<div id="app">
原始字符串：<input type="text" v-model="message"><br/>
反转后的字符串：{{reversedMessage}}
</div>
<!--引入Vue文件-->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
//创建一个应用程序实例
const vm= Vue.createApp({
//该函数返回数据对象
data(){
return{
message: '海角逢春，天涯为客。'
}
},
computed: {
//计算属性的getter
reversedMessage(){
return this.message.split('').reverse().join('');
}
}
//在指定的DOM元素上装载应用程序实例的根组件
}).mount('#app');
</script>
在Chrome浏览器中运行程序，输入框下面会显示对象的反转内容，效果如图3-5所示。
在上面的示例中，当message属性的值发生改变时，reversedMessage的值也会自动更新，并且会自动同步更新DOM部分。
在浏览器的控制台中修改message的值，按回车键执行代码，可以发现reversedMessage的值也发生了改变，如图3-6所示。
本文节选自《Vue.js 3.x+Element Plus从入门到精通（视频教学版）》，获出版社和作者授权发
布。
原文地址：https://blog.csdn.net/brucexia/article/details/137222972
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！