今天小编给大家分享一下Vue中的计算属性computed怎么用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。
computed 是基于它的依赖缓存,只有在它的相关依赖发生改变时才会进行更新。官方文档是这样说的:对于任何包含响应式数据的复杂逻辑,你都应该使用计算属性。
拼接字符串、分数是否及格、message记录一段文字,这里是用computed实现的
<div id="app">
<!-- 插值语法表达式直接进行拼接 -->
<!-- 1.拼接姓名 -->
<h3>{{fullname}}</h3>
<!-- 2.显示分数及格或不及格 -->
<h3>{{scorelevel}}</h3>
<!-- 3.反转单词 -->
<!-- reverse针对于数组,先用split转为数组,在用reverse -->
<h3>{{reversetext}}</h3>
</div>
<script src="../lib/vue.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
// name
firstName: "kk",
lastName: "cc",
// score
score: 99,
// 文本中单词反转
message: "I love stydy Vue3",
};
},
computed: {
fullname() {
return this.firstName + " " + this.lastName;
},
scorelevel() {
return this.score >= 60 ? "及格" : "不及格";
},
reversetext() {
return this.message.split(" ").reverse().join(" ");
},
},
});
app.mount("#app");
当然我们用Mustache插值语法、methods也是可以完成的,但是对于复杂数据的处理,我们往往采用computed,写法更清晰,且计算属性是有缓存的
会基于它们的依赖关系进行缓存;
在数据不发生变化时,计算属性是不需要重新计算的;
但是如果依赖的数据发生变化,在使用时,计算属性依然会重新进行计算;
&tinsp;
所以这也是我们在复杂数据处理时更倾向于computed
在使用相同次数的fullName时,methods执行三次,computed执行一次,这正是由于computed计算属性会被缓存
1.4.计算属性computed的setter和getter
大多数情况下,计算属性只需要一个getter方法,那么此时computed属性属性值为函数
如果想要设置计算属性的值,我们可以给计算属性设置一个setter方法
computed: {
// 语法糖
fullname() {
return this.firstname + " " + this.lastname;
},
// 完整写法
fullname: {
get: function () {
return this.firstname + " " + this.lastname;
},
set: function (value) {
const names = value.split(" ");
this.firstname = names[0];
this.lastname = names[1];
},
},
以上就是“Vue中的计算属性computed怎么用”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。