本文共 8460 字，大约阅读时间需要 28 分钟。

区别

• 计算属性可以简化差值表达式写法
• 计算属性变量定义在computed中，可以直接使用在｛｝中的，跟methods中函数类似，只不过有利于缓存，性能更好
• 计算属性可以防止监听属性的滥用，但一些异步请求，计算属性做不到，还得watch来完成。

例如：解决element-ui分页中删除页面最后一条数据时，currentPage没有减一，页面列表为空问题时，就可以用到监听属性

监听页面的总条数，并对总条数进行判断。从而刷新列表

<el-pagination    layout="prev, pager, next"    @current-change="changePageNum"    :current-page="currentPage"    :page-size="pageSize"    :total="total"></el-pagination>

watch:{         total(){           if(this.total==(this.currentPage-1)*this.pageSize&& this.total!=0){             this.currentPage-=1;          getDiscountList(this);//获取列表数据        }      }    }

要使用分页，返回部分数据时，可以使用计算属性

    computed: {         limitData() {           let data = [...this.table1Datas];        return data;      },      // 因为要动态计算总页数，所以还需要一个计算属性来返回最终给 Table 的 data      dataWithPage() {           const data = this.limitData;        const start = this.current * this.size - this.size;        const end = start + this.size;        return [...data].slice(start, end);      },      //替换数据中的回车符      content: function(msg) {           return msg.replace('\n', '<br>');      },    },

计算属性和监听属性结合起来用

结合使用效果更佳

• 需求：根据公积金比率和员工工资，计算公积金数

<Form ref="form" :model="data" :rules="rules" label-position="top" class="ivu-mt"><Card :bordered="false" dis-hover title="五险一金信息">    <Row :gutter="24">        <Col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">            <FormItem label="养老金基数：">                <Input :readonly="true" v-model="data.pensionBase" placeholder="自动计算"/>            </FormItem>        </Col>        <Col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">            <FormItem label="养老金比率：" prop="pensionPer" label-for="pensionPer">                <Input :readonly="true" v-model="data.pensionPer" placeholder="请输入"                       element-id="pensionPer"/>            </FormItem>        </Col>        <Col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">            <FormItem label="医疗基数：">                <Input :readonly="true" v-model="data.medicalBase" placeholder="自动计算"/>            </FormItem>        </Col>        <Col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">            <FormItem label="医疗保险比率：" prop="medicalPer" label-for="medicalPer">                <Input :readonly="true" v-model="data.medicalPer" placeholder="请输入"                       element-id="medicalPer"/>            </FormItem>        </Col>        <Col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">            <FormItem label="失业保险基数：">                <Input :readonly="true" v-model="data.unempBase" placeholder="自动计算"/>            </FormItem>        </Col>        <Col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">            <FormItem label="失业保险比率：">                <Input :readonly="true" v-model="data.unempPer"/>            </FormItem>        </Col>        <Col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">            <FormItem label="工伤保险基数：">                <Input :readonly="true" v-model="data.injuryBase"/>            </FormItem>        </Col>        <Col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">            <FormItem label="工伤保险比率：">                <Input :readonly="true" v-model="data.injuryPer"/>            </FormItem>        </Col>        <Col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">            <FormItem label="生育保险基数：">                <Input :readonly="true" v-model="data.bithinsuranceBase"/>            </FormItem>        </Col>        <Col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">            <FormItem label="生育保险比率：">                <Input :readonly="true" v-model="data.bithinsurancePer" placeholder="请输入"/>            </FormItem>        </Col>        <Col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">            <FormItem label="公积金基数：">                <Input  v-model="data.accumulationFundBase" placeholder="不填则自动计算"                />            </FormItem>        </Col>        <Col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">            <FormItem label="公积金比率：">                <Input v-model="data.accumulationFundPer" placeholder="不填则自动计算"                />            </FormItem>        </Col>    </Row></Card></Form>         

通过监听属性监听数据的变化，结合计算属性，计算出相应值，然后返回即可

data() {      return {   	data: {   	nickName:'',	deptName: '',	account: '',	basicSalary: '',	bonus: '0',	lunchSalary: '0',	leaveDel: '0',	overworkAdd: '0',	attendanceDel: '0',	allSalary: '0',	shouldSalary: '',	createDate: '',	//五险一金	pensionBase: '',//养老金基数	pensionPer: '0.08',//养老金比率	medicalBase: '',//医疗基数	medicalPer: '0.08',//医疗保险比率	unempBase: '',//失业保险基数	unempPer: '0.01',//失业保险比率	injuryBase: '0',//工伤保险基数	injuryPer: '0',//工伤保险比率	bithinsuranceBase: '0',//生育保险基数	bithinsurancePer: '0',//生育保险比率	accumulationFundBase: '',//公积金基数	accumulationFundPer: '',//公积金比率	},   }   },           computed: {               labelWidth() {                   return this.isMobile ? undefined : 140;            },            labelPosition() {                   return this.isMobile ? 'top' : 'left';            },            //计算养老金基数            newPensionBase() {                   return this.data.pensionPer * this.data.basicSalary;            },            //计算医疗基数            newmedicalBase() {                   return this.data.medicalPer * this.data.basicSalary;            },            //计算失业保险基数            newunempBase() {                   return this.data.unempPer * this.data.basicSalary;            },            //计算公积金比率            newaccumulationFundPer() {                   let basicSalary = this.data.basicSalary                if (basicSalary != null) {                       switch (true) {                           /*1、工资范围在1-5000元之间的，包括百5000元，适用个人所得税税率为0%。 速算扣除数（元）0*/                        case basicSalary < 5000:                            this.data.accumulationFundPer = 0;                            return this.data.basicSalary * this.data.accumulationFundPer;                            break;                        /*2、工资范围在5000-8000元之间的，包括度8000元，适用个人所得税税率为3%。 速算扣除数（元）105*/                        case basicSalary >= 5000 && basicSalary <80000:                            this.data.accumulationFundPer = 0.03;                            return this.data.basicSalary * this.data.accumulationFundPer;                            break;                        /*3、工资范围在8000-17000元之间的，包括17000元，适用个人所得税税率为10%。速算扣除数（元）555*/                        case basicSalary >8000 && basicSalary <= 17000:                            this.data.accumulationFundPer = 0.1;                            return this.data.basicSalary * this.data.accumulationFundPer;                            break;                        /*4、工资范围在17000-30000元之间的，包括30000元，适用个人所得税税率为20%。速算扣除数（元）1005*/                        case basicSalary > 17000 && basicSalary <= 30000:                            this.data.accumulationFundPer = 0.2;                            return this.data.basicSalary * this.data.accumulationFundPer;                            break;                        /*5、工资范围在30000-40000元之间的，包括40000元，适用个人所得税税率为25%。速算扣除数（元）2755*/                        case basicSalary >30000 && basicSalary <= 40000:                            this.data.accumulationFundPer = 0.25;                            return this.data.basicSalary * this.data.accumulationFundPer;                            break;                        /*6、工资范围在40000-60000元之间的，包括60000元，适用个人所得税税率为30%。速算扣除数（元）5505*/                        case basicSalary >40000 && basicSalary <= 60000:                            this.data.accumulationFundPer = 0.3;                            return this.data.basicSalary * this.data.accumulationFundPer;                            break;                        /*7、工资范围超过60000的,适用个人所得税税率为45%。速算扣除数（元）13505*/                        case basicSalary >60000:                            this.data.accumulationFundPer = 0.45;                            return this.data.basicSalary * this.data.accumulationFundPer;                            break;                        default:                            break;                    }                }            }        },        watch: {               //养老金基数            newPensionBase(val) {                   this.data.pensionBase = val;            },            //医疗基数            newmedicalBase(val) {                   this.data.medicalBase = val;            },            //失业保险基数            newunempBase(val) {                   this.data.unempBase = val;            },            //公积金基数            newaccumulationFundPer(val) {                   this.data.accumulationFundBase = val;            }        },

效果