【Vue】Vue中的计算属性computed_将数据转换为computed vue

  <!-- 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，写法更清晰，且计算属性是有缓存的


 


#### 1.3.计算属性的缓存


⭐⭐


* 会基于它们的依赖关系进行缓存；
* 在数据不发生变化时，计算属性是不需要重新计算的；
* 但是如果依赖的数据发生变化，在使用时，计算属性依然会重新进行计算；


&tinsp;  
 所以这也是我们在复杂数据处理时更倾向于computed


* 在使用相同次数的fullName时，methods执行三次，computed执行一次，这正是由于computed计算属性会被缓存  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/1302a45be7db4b53a5ac7cbf2269d725.png)  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/1b900d27b60c4fbea83e205bbc3cbe1f.png)


 


#### 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];
        },
      },

### 总结

为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。



包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

![](https://img-blog.csdnimg.cn/img_convert/d74f8b42f4a63c76b18efc6a818147df.png)

![](https://img-blog.csdnimg.cn/img_convert/6deb905d9655a3f0f54b8920686e1970.png)

**前端面试题汇总**

![](https://img-blog.csdnimg.cn/img_convert/42728594459506983a38ca2b86545fc6.png)



**JavaScript**

![](https://img-blog.csdnimg.cn/img_convert/7796de226b373d068d8f5bef31e668ce.png)

**性能**

![](https://img-blog.csdnimg.cn/img_convert/d7f6750332c78eb27cc606540cdce3b4.png)



**linux**

![](https://img-blog.csdnimg.cn/img_convert/ed368cc25284edda453a4c6cb49916ef.png)