快捷導(dǎo)航

Vue computed計(jì)算屬性總結(jié)記錄

更新時(shí)間：2023年02月07日 14:58:47 作者：進(jìn)擊的Coders

在vue中，有時(shí)候你需要對(duì)data中的數(shù)據(jù)進(jìn)行處理，或者對(duì)抓取的數(shù)據(jù)進(jìn)行處理之后再掛載呈現(xiàn)到標(biāo)簽中，這時(shí)候你就需要計(jì)算屬性了，當(dāng)然看到這里你可能還是不了解那下面我舉幾個(gè)實(shí)例并附代碼解釋

前言

Vue中的計(jì)算屬性（comupted）是一個(gè)非常常用的技術(shù)，如果使用得當(dāng)，可以很優(yōu)雅的解決傳統(tǒng)方式較為復(fù)雜的問題，這篇文章以近期使用的computed為例，對(duì)computed進(jìn)行簡要介紹。

一、計(jì)算屬性介紹

計(jì)算屬性本質(zhì)上是一個(gè)方法，寫在computed:{}配置項(xiàng)里面，可以當(dāng)做屬性來使用。能使用計(jì)算屬性的場景使用模板語法也同樣能夠?qū)崿F(xiàn)，不過可能較為復(fù)雜，而計(jì)算屬性存在的意義在于使得模板語法更加簡介。因此，對(duì)于復(fù)雜邏輯的計(jì)算結(jié)果需要被緩存，再次利用的情況下都需要使用計(jì)算屬性。

二、使用步驟

1.template中綁定計(jì)算屬性

      <el-form-item label="類型" prop="type">
        <el-radio v-model="pieType" :label="'ring'">環(huán)形</el-radio>
        <el-radio v-model="pieType" :label="'circle'">圓形</el-radio>
      </el-form-item>

我這里在form表單中type類型的表單項(xiàng)中使用了計(jì)算屬性pieType

2.script中定義計(jì)算屬性

computed:{
    pieType:{
      set(val){
        if (val === 'ring'){
          this.$set(this.curChart.option.series[0], 'radius', ['60%', '80%'])
        }else if (val === 'circle'){
          this.$set(this.curChart.option.series[0], 'radius', '80%')
        }
      },
      get(){
        if (this.curChart.option.series[0].radius === '80%'){
          return 'circle'
        }else if (JSON.stringify(this.curChart.option.series[0].radius) === JSON.stringify(['60%', '80%'])){
          return 'ring'
        }
      }
    }
  },

在這個(gè)示例中，我想要實(shí)現(xiàn)如下效果：當(dāng) this.curChart.option.series[0].radius值為 '80%'時(shí)，form表單中顯示餅狀圖的類型為環(huán)形圖，當(dāng) this.curChart.option.series[0].radius值為[‘60%’, ‘80%’]，form表單中顯式餅狀圖類型為圓形。因此在get時(shí)，判斷radius是哪種類型，返回對(duì)應(yīng)的ring或者circle值；在set時(shí)，根據(jù)pieType值，更改this.curChart.option.series[0]的radius值。按照這個(gè)思路，你也可以進(jìn)行顯示值和存儲(chǔ)值的切換。

3.計(jì)算屬性的配置項(xiàng)

get(): 必須寫，且無參。當(dāng)初次讀取計(jì)算屬性或者計(jì)算屬性依賴的數(shù)據(jù)發(fā)生變化時(shí)被調(diào)用，get()方法的返回值就是計(jì)算屬性的值。
set(): 可寫，接受一個(gè)可選參數(shù)，該參數(shù)是計(jì)算屬性被修改之后的值。當(dāng)計(jì)算屬性被修改時(shí)調(diào)用，例如在上面的例子中，切換類型的單選按鈕，會(huì)導(dǎo)致計(jì)算屬性被修改，進(jìn)而執(zhí)行set()方法，對(duì)this.curChart.option.series[0]的radius值進(jìn)行賦值。

4.計(jì)算屬性的簡寫

當(dāng)計(jì)算屬性只需要get值，也就是計(jì)算屬性本身不會(huì)變化，只會(huì)受到別的數(shù)據(jù)影響而變化時(shí)，采用簡寫方式：

data: {
        firstName: '熊',
        lastName: '大'
      },
computed:{
     //此處簡寫方式一：
     fullName:{
	     get(){
	     	return this.firstName +'-'+  this.lastName
	     }
     }
     //此處簡寫方式二：
     fullName(){
            return this.firstName +'-'+  this.lastName
     }
}