聊聊Vue中的計算屬性computed

前端（vue）入門到精通課程：進入學習
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API偵錯工具：

一、計算屬性computed

1.1.什麼是計算屬性computed

⭐⭐
computed 是基於它的依賴快取，只有在它的相關依賴發生改變時才會進行更新。官方檔案是這樣說的：對於任何包含響應式資料的複雜邏輯，你都應該使用計算屬性。（學習視訊分享：）

1.2.複雜資料的處理-computed

⭐⭐
拼接字串、分數是否及格、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，寫法更清晰，且計算屬性是有快取的

1.3.計算屬性的快取

⭐⭐

會基於它們的依賴關係進行快取；
在資料不發生變化時，計算屬性是不需要重新計算的；
但是如果依賴的資料發生變化，在使用時，計算屬性依然會重新進行計算；

&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的詳細內容，更多請關注TW511.COM其它相關文章！