快捷導(dǎo)航

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

更新時間：2023年02月07日 14:58:47 作者：進擊的Coders

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

前言

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

一、計算屬性介紹

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

二、使用步驟

1.template中綁定計算屬性

      <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類型的表單項中使用了計算屬性pieType

2.script中定義計算屬性

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'
        }
      }
    }
  },

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

3.計算屬性的配置項

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

4.計算屬性的簡寫

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

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