快捷導(dǎo)航

Vue使用Composition?API生成計算屬性computed

更新時間：2023年06月20日 10:37:45 作者：海塔燈

這篇文章主要為大家詳細介紹了Vue如何使用Composition?API實現(xiàn)生成計算屬性computed，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

概述

作為程序員我們都知道寫代碼不僅要高效完成需求，還要讓我們的代碼優(yōu)雅、可維護性更高。而可維護性即代碼的可讀性，因為我們寫的代碼就是公司的財產(chǎn)，當(dāng)需要其他人維護的時候，可讀性更高的代碼會讓維護你代碼的人更快上手。本文說的computed計算屬性就是為了這一目的來的，計算屬性可以讓我們的代碼看起來不臃腫，可讀性和可維護性更高，所以在介紹使用Compition Api生成計算屬性之前，我們需要先介紹下啥是計算屬性。

1. 計算屬性

1.1 計算屬性的介紹和使用

Vue的表達式很強大也很方便，但是寫簡單的操作還行，復(fù)雜的操作雖然也沒啥大問題，但是會讓代碼變得很臃腫，導(dǎo)致可讀性變得很差，難以維護。引用官網(wǎng)的例子來了解計算屬性。

//.........省略開頭代碼.......
  data() {
    return {
      author: {
        name: 'John Doe',
        books: [
          'Vue 2 - Advanced Guide',
          'Vue 3 - Basic Guide',
          'Vue 4 - The Mystery'
        ]
      }
    }
  }

假設(shè)想根據(jù) author 是否已有一些書籍來展示不同的信息，如果使用表達式的方式如下：

<p>是否有已經(jīng)發(fā)布的書籍:</p>
<span>{{ author.books.length > 0 ? 'Yes' : 'No' }}</span>

上面的代碼看起來已經(jīng)顯示得有點復(fù)雜了，萬一我們需要在界面中的很多地方都這樣寫，就太臃腫了，同樣的代碼到處都在寫。所以引入了計算屬性來優(yōu)化這個問題。也許很多小伙伴會說用方法抽取呀，后面會介紹為啥不用方法。使用計算屬性后上面的需求可以用如下的方式實現(xiàn)，我們可以使用Vue提供的computed關(guān)鍵字定義計算屬性：

//.............省略開頭代碼.....
  data() {
    return {
      author: {
        name: 'John Doe',
        books: [
          'Vue 2 - Advanced Guide',
          'Vue 3 - Basic Guide',
          'Vue 4 - The Mystery'
        ]
      }
    }
  },
  computed: {
    // 一個計算屬性的 getter
    publishedBooksMessage() {
      // `this` 指向當(dāng)前組件實例
      return this.author.books.length > 0 ? 'Yes' : 'No'
    }
  }
//  ..........

在上面的代碼中，我們在這里定義了一個計算屬性 publishedBooksMessage。當(dāng)我們更改此應(yīng)用的 data 中 books 數(shù)組的值后，可以看到 publishedBooksMessage 也會隨之改變。在模板中使用計算屬性的方式和一般的屬性并無二致。Vue 會檢測到 this.publishedBooksMessage 依賴于 this.author.books，所以當(dāng) this.author.books 改變時，任何依賴于 this.publishedBooksMessage 的綁定都將同時更新。 （引用自Vue官網(wǎng)計算屬性章節(jié)）

1.2 計算屬性和方法的區(qū)別

現(xiàn)在我們來解釋下為啥不用方法，Vue反而要提供一個計算屬性呢？我們繼續(xù)看例子來解釋。還是用上面的例子，我們同樣可以使用方法來完成需求

// 定義一個方法來判斷是否有新發(fā)布的作品
methods: {
  calculateBooksMessage() {
    return this.author.books.length > 0 ? 'Yes' : 'No'
  }
}
// 調(diào)用方法
<p>{{ calculateBooksMessage() }}</p>

如上面代碼所示，當(dāng)我們使用方法來實現(xiàn)上面的需求時，執(zhí)行的結(jié)果確實是完全一致的，不同之處在于計算屬性值會基于其響應(yīng)式依賴被緩存。一個計算屬性僅會在其響應(yīng)式依賴更新時才重新計算。這意味著只要 author.books 不改變，無論多少次訪問 ,publishedBooksMessage 都會立即返回先前的計算結(jié)果，而不用重復(fù)執(zhí)行 getter 函數(shù) 也就是說，計算屬性會做一個緩存，只要計算屬性中參與計算的變量對應(yīng)的依賴不更新，計算屬性就會返回緩存的值，有更新才會重新計算。就比如本例中的books，只要我們不往books中添加新書，那么計算屬性publishedBooksMessage 會一直返回之前計算的值，不會觸發(fā)重新計算，而使用方法的話，每次都會去執(zhí)行方法，無論是否加入新書，都會執(zhí)行。這樣就會浪費CPU資源，雖然不多，但是能省則省嘛。

使用計算屬性的另一個好處就是快，試想下你有一個很大的list想要渲染出來，使用方法的話，無論你是否更新list都需要執(zhí)行一遍遍歷拿length的操作，但是使用計算屬性，計算過一次后，只要后面沒有更新，就可以使用緩存，這樣就能提升頁面的響應(yīng)速度。

1.3 可寫計算屬性

計算屬性默認是只讀的。當(dāng)你嘗試修改一個計算屬性時，你會收到一個運行時警告。因為計算屬性主要是會緩存，如果隨意的寫會破壞之前緩存的值，導(dǎo)致下次取出緩存的值時導(dǎo)致值不是預(yù)期的。通常情況下我們只在某些特殊場景中才需要用到“可寫”的屬性，可寫的計算屬性可以通過同時提供 getter 和 setter 來創(chuàng)建，代碼如下：

  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    fullName: {
      // getter
      get() {
        return this.firstName + ' ' + this.lastName
      },
      // setter
      set(newValue) {
        // 注意：我們這里使用的是解構(gòu)賦值語法
        [this.firstName, this.lastName] = newValue.split(' ')
      }
    }
  }

在上面的代碼中當(dāng)調(diào)用this.fullName = 'John Doe' 時，setter 會被調(diào)用而 this.firstName 和 this.lastName 會隨之更新，get()方法是在每次取值時都會調(diào)用，而set方法是每次賦值時都會調(diào)用。

2.使用Compition API 生成計算屬性

在Compition API 中生成計算屬性其實就是把傳統(tǒng)Vue中使用的計算屬性寫到setup函數(shù)中，代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>computed的使用</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script>
const app = Vue.createApp({
    setup(){
        const{ref, computed} = Vue;
        const count = ref(0);
        const handleClick = ()=>{
            count.value += 1;
        }
        // 操作基本類型的值
        // const countAddFive = computed(()=>{
        //     return count.value + 5;
        // });
        let countAddFive = computed({
            get:() =>{
                return count.value + 5;
            },
            set:(param)=>{
                count.value = param  - 5;
            } 
        }) 
        setTimeout(()=>{
            countAddFive.value = 100;
        },3000)
        return {count,handleClick,countAddFive}
        },
   template:
         `
        <div>
            <span @click="handleClick">{{count}}--------{{countAddFive}}</span>
        </div>
         `
 });
 const vm = app.mount('#root');
</script>

上面的代碼中，我們在setup中使用計算屬性時需要事先引入 const{ref, computed} = Vue;然后就是在setup()中使用，用法很簡單，在代碼中已經(jīng) 很清晰了。代碼demo的意思也很簡單，就是展示兩個值count,和countAddFive，點擊時點擊時，count的值加一，countAddFive加5，然后過了3秒后，將countAddFive的值改成100，然后count的值會變成95，因為

 set:(param)=>{
                count.value = param  - 5;
            }

設(shè)置conutAddFive的值時會將count的值減5。

總結(jié)

本文主要介紹了計算屬性和在Compition API 中使用計算屬性，學(xué)完本文，我們需要了解到在什么情況下需要使用計算屬性，計算屬性和方法的區(qū)別。以及了解可寫的計算屬性如何使用。計算屬性的使用可以極大的加快我們的界面響應(yīng)速度，建議讀者好好掌握計算屬性的使用，然后在項目中根據(jù)場景將計算屬性應(yīng)用到對應(yīng)的地方。

以上就是Vue使用Composition API生成計算屬性computed的詳細內(nèi)容，更多關(guān)于Vue計算屬性computed的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: