前言

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()方法的作用和调用方式。

vue computed计算属性相关推荐

深入理解 Vue Computed 计算属性
Computed 计算属性是 Vue 中常用的一个功能,我们今天来说一下他的执行过长拿官网简单的例子来看一下: <div id="example"><p> ...
关于Vue中计算属性computed和methods属性的区别，你了解多少呢
文章目录 1.实例 2.computed计算属性中: 前提1.当计算属性fn2没有依赖data中的数据时: 前提2.:当计算属性依赖data中的数据时: 3.区别: 在做项目过程中,有时会出现同一个需 ...
vue的computed计算属性学习
模板内的表达式是非常便利的,但是它们实际上只用于简单的运算.在模板中放入太多的逻辑会让模板过重且难以维护.这时候需要使用到vue的计算属性computed. 文件目录结构如下:利用vue脚手架创建这 ...
Vue中computed(计算属性)、methods、watch的区别
初学vue,阅读api后,发现Vue提供了多种逻辑处理的方法,单纯的方法methods,computed(计算属性)以及watch等,充分理解这三者的区别,才能写出更加健壮的Vue代码. 1.meth ...
Vue的计算属性computed和监听属性watch
Vue的计算属性computed 定义通过已有属性计算生成一个新的组合属性. 原理底层借助了Object.defineproperty方法提供的getter和setter来实现. 性质计算属性的 ...
Vue中的computed计算属性
文章目录 computed与watch的异同不同点相同点示例源码结果分析 computed与watch的异同不同点触发条件不同 computed计算属性会依赖于使用它的data属性 ...
Vue入门【三】-- 详解computed计算属性
目录 computed: ♡ ‧₊˚ 基本使用 ‧₊˚ ♡ ♡ ‧₊˚语法‧₊˚ ♡ ♡ ‧₊˚效果‧₊˚ ♡ ♡ ‧₊˚ 面试问点 ‧₊˚ ♡ computed与methods的区别: comput ...
vue中计算属性computed传递参数
vue中computed计算属性无法直接进行传参,如果有传参数的需求可以使用闭包函数(也叫匿名函数)实现.例如传过来不同的状态,我们设置成不同的颜色.(三目运算符可以实现但是只能设置两种,状态多了就不 ...
vue的计算属性computed
计算属性的应用场景从已有的数据A中计算等到的新的数据B,使用计算属性如果一个结果需要依赖data中的数据,但是需要经过一些逻辑处理,才能得到你想要的数据.此时就可以使用计算属性. 定义格式计算属 ...

vue computed计算属性

文章目录

前言