广告：宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买

⭐⭐ computed 是基于它的依赖缓存，只有在它的相关依赖发生改变时才会进行更新。官方文档是这样说的：对于任何包含响应式数据的复杂逻辑，你都应该使用计算属性。 （学习视频分享：vue视频教程）

⭐⭐ 拼接字符串、分数是否及格、message记录一段文字，这里是用computed实现的

<div id="app">      <!-- 插值语法表达式直接进行拼接 -->      <!-- 1.拼接姓名 -->      <h2>{{fullname}}</h2>      <!-- 2.显示分数及格或不及格 -->      <h2>{{scorelevel}}</h2>      <!-- 3.反转单词 -->      <!-- reverse针对于数组，先用split转为数组，在用reverse -->      <h2>{{reversetext}}</h2>    </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];            },          },

【相关视频教程推荐：vuejs入门教程、web前端入门】

以上就是聊聊Vue中的计算属性computed的详细内容，更多请关注9543建站博客其它相关文章！

广告：SSL证书一年128.66元起，点击购买~~~