一、計(jì)算屬性

使用場(chǎng)景

從已有的數(shù)據(jù)A中計(jì)算等到的新的數(shù)據(jù)B，使用計(jì)算屬性。

如果一個(gè)結(jié)果需要依賴data中的數(shù)據(jù)，但是需要經(jīng)過一些邏輯處理，才能得到你想要的數(shù)據(jù)。此時(shí)就可以使用計(jì)算屬性。

定義格式

在vue實(shí)例中，補(bǔ)充computed配置項(xiàng)

普通寫法

{
    data(){},
    methods: {}
    // 聲明計(jì)算屬性
    computed: {
        //屬性名字（計(jì)算屬性名稱）
        //屬性的值（計(jì)算屬性處理函數(shù)）
        計(jì)算屬性名1 () {
            // 對(duì)依賴的數(shù)據(jù)進(jìn)行處理，且進(jìn)行return
            return
        }，
        計(jì)算屬性名2 () {
            // 對(duì)依賴的數(shù)據(jù)進(jìn)行處理，且進(jìn)行return
            return
        }
    }
}

computed是vue的配置選項(xiàng)，它的值是一個(gè)對(duì)象，其中可定義多個(gè)計(jì)算屬性，每個(gè)計(jì)算屬性就是一個(gè)函數(shù)。

• 屬性名稱： 計(jì)算屬性的名稱
• 屬性的值：計(jì)算屬性的素材函數(shù)
  • 對(duì)需要依賴的數(shù)據(jù)，進(jìn)行邏輯上的處理
  • 處理完畢后，需要return出去，返回的值就是計(jì)算屬性的值

使用格式

在兩個(gè)地方使用：

• 模板
  • 用插值表達(dá)式 {{計(jì)算屬性名}}
  • 用其它指令
• 在實(shí)例內(nèi)
  • this.計(jì)算屬性名

示例 —— 數(shù)組求和

<template>
  <div id="app">
    <p>求和:{{ sum1 }}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      arr: [1,2,3,4]
    }
  },
  computed: {
    sum1(){
      // 對(duì)依賴的數(shù)據(jù)進(jìn)行處理，且進(jìn)行return
      return this.arr.reduce((sum, item)=>sum + item, 0)
    }
  }
}
</script>

在模板中使用計(jì)算屬性，和使用data的方式是一樣的。

雖然在計(jì)算屬性中聲明的是函數(shù)，但是在模板是使用，當(dāng)做的數(shù)據(jù)來使用。不需要加括號(hào)。

小結(jié)：

• 什么時(shí)間用：需要對(duì)數(shù)據(jù)進(jìn)行復(fù)雜的邏輯加工，產(chǎn)生新的數(shù)據(jù)時(shí)。
• 定義： 就是一個(gè)特殊的配置項(xiàng)computed。其中有多個(gè)函數(shù)。
• 使用：計(jì)算屬性的使用方式與data中的數(shù)據(jù)項(xiàng)一致；
• 計(jì)算屬性-計(jì)算：這個(gè)值是對(duì)原數(shù)據(jù)進(jìn)行計(jì)算之后得到的新的數(shù)據(jù)
• 計(jì)算屬性-屬性：它的使用方法與原數(shù)據(jù)一樣。this.計(jì)算屬性名,{{計(jì)算屬性名}}
• 執(zhí)行的時(shí)機(jī)： 如果計(jì)算屬性中依賴的數(shù)據(jù)項(xiàng)變化時(shí)，它會(huì)自動(dòng)調(diào)用。

computed有緩存

示例：

<template>
  <div id="app">
    <p>求和:{{ sum1 }}</p>
    <p>求和:{{ sum1 }}</p>
    <p>求和:{{ sum1 }}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      arr: [1,2,3,4]
    }
  },
  computed: {
    sum1(){
      // 求arr的和，并返回
      // 如果arr變化了，計(jì)算屬性會(huì)重新計(jì)算
      console.log('計(jì)算屬性被調(diào)用了')
      return this.arr.reduce((sum, item)=>sum + item, 0)
    }
  }
}
</script>

結(jié)果：

• 從上面的示例中可以看到，計(jì)算屬性在模板中被調(diào)用了三次，但控制臺(tái)只打印了一次，這是因?yàn)橛?jì)算屬性執(zhí)行前會(huì)先從緩存中查找有沒有這個(gè)數(shù)據(jù)，如果有就不會(huì)執(zhí)行。
• 計(jì)算屬性的執(zhí)行機(jī)制就像我們查字典一樣
  • 如果要計(jì)算的數(shù)據(jù)在緩存中能找到，就不會(huì)再執(zhí)行函數(shù)，而是直接拿取數(shù)據(jù)。

二、總結(jié)

當(dāng)我們?cè)谀０逯衼盹@示一份經(jīng)過對(duì)數(shù)據(jù)項(xiàng)進(jìn)行復(fù)雜計(jì)算之后的結(jié)果時(shí)，我們有兩種解決方案：

• 計(jì)算屬性
• 函數(shù)

如何選擇：

• methods定義函數(shù)，如果在模板中使用，每使用一次，就相當(dāng)于調(diào)用了一次，處理邏輯會(huì)重新執(zhí)行。
• computed定義計(jì)算屬性，如果在模板中使用，使用多次，但是如果依賴的數(shù)據(jù)不發(fā)生改變，計(jì)算屬性對(duì)應(yīng)的函數(shù)不會(huì)重新執(zhí)行。
  • 計(jì)算屬性會(huì)做緩存，提高渲染的性能。

到此這篇關(guān)于vue計(jì)算屬性及函數(shù)的選擇的文章就介紹到這了,更多相關(guān)vue計(jì)算屬性內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！