Vue computed计算属性总结记录
进击的Coders 人气:0前言
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 } }
总结
本文对vue的计算属性进行总结记录,并根据最近用到computed的地方进行详细举例说明,此外还介绍了计算属性的简写方式,get(), set()方法的作用和调用方式。
加载全部内容