Vuecomputed计算属性总结记录

2023-02-07 18:00

短信预约 -IT技能 免费直播动态提醒

前言

Vue中的计算属性（comupted）是一个非常常用的技术，如果使用得当，可以很优雅的解决传统方式较为复杂的问题，这篇文章以近期使用的computed为例，对computed进行简要介绍。

一、计算属性介绍

计算属性本质上是一个方法，写在computed:{}配置项里面，可以当做属性来使用。能使用计算属性的场景使用模板语法也同样能够实现，不过可能较为复杂，而计算属性存在的意义在于使得模板语法更加简介。因此，对于复杂逻辑的计算结果需要被缓存，再次利用的情况下都需要使用计算属性。

二、使用步骤

1.template中绑定计算属性

      <el-form-item label="类型" prop="type">
        <el-radio v-model="pieType" :label="'ring'">环形</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'
        }
      }
    }
  },

在这个示例中，我想要实现如下效果：当 this.curChart.option.series[0].radius值为 '80%'时，form表单中显示饼状图的类型为环形图，当 this.curChart.option.series[0].radius值为[‘60%’, ‘80%’]，form表单中显式饼状图类型为圆形。因此在get时，判断radius是哪种类型，返回对应的ring或者circle值；在set时，根据pieType值，更改this.curChart.option.series[0]的radius值。按照这个思路，你也可以进行显示值和存储值的切换。

3.计算属性的配置项

get(): 必须写，且无参。当初次读取计算属性或者计算属性依赖的数据发生变化时被调用，get()方法的返回值就是计算属性的值。
set(): 可写，接受一个可选参数，该参数是计算属性被修改之后的值。当计算属性被修改时调用，例如在上面的例子中，切换类型的单选按钮，会导致计算属性被修改，进而执行set()方法，对this.curChart.option.series[0]的radius值进行赋值。

4.计算属性的简写

当计算属性只需要get值，也就是计算属性本身不会变化，只会受到别的数据影响而变化时，采用简写方式：

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