说说 Vue.js 的计算属性

作者 : 开心源码 本文共2576个字,预计阅读时间需要7分钟 发布时间: 2022-05-12 共118人阅读

1 应用场景

Vue.js 的表达式假如由于逻辑复杂变得过长时,就会变得臃肿,以至于难以阅读和维护。

这里我们对一个以分号分隔的字符串做逆序解决,并修改分隔符为逗号的表达式。

html:

<div id="app">    {{str.split(';').reverse().join(',')}}</div>

js:

var app=new Vue({    el:'#app',    data:{        str:'1;2;3'    }});

输出结果:

3,2,1

使用计算属性之后——

html:

<div id="app2">    {{reversedStr}}</div>

js:

var app2 = new Vue({    el: '#app2',    data: {        str: '1;2;3'    },    computed: {        reversedStr: function () {            return this.str.split(';').reverse().join(',');        }    }});

所有的计算属性都以函数的形式定义在 Vue 实例内的 computed 属性内,这些函数最终会返回计算后的结果 。

2 依赖多个数据

计算属性还可以依赖 data 属性内的多个数据,只需其中任一数据发生变化,计算属性就会重新执行,视图也会得到相应的升级。我们以购物车内两种的物品为例,说说如何通过计算属性来计算购买商品的总价:

html:

<div id="app">    购买的商品:{{commodity1.name}} * {{commodity1.count}}、{{commodity2.name}} * {{commodity2.count}},总价:{{totalPrice}}</div>

js:

<script>    var app = new Vue({        el: '#app',        data: {            commodity1: {                name: 'Bose SoundSport Free 真无线蓝牙耳机',                price: 1998,                count: 1            },            commodity2: {                name: 'Kindle paperwhite 电子书阅读器',                price: 998,                count: 2            }        },        computed: {            totalPrice: function () {                return this.commodity1.price * this.commodity1.count + this.commodity2.price * this.commodity2.count;            }        }    });</script>

输出结果:

购买的商品:Bose SoundSport Free 真无线蓝牙耳机 * 1、Kindle paperwhite 电子书阅读器 * 2,总价:3994

当 commodity1 或者 commodity2 中的商品有任何变化,比方购买数量变化或者价格调整时,计算属性 totalPrice 就会自动升级。

3 get 与 set 函数

每一个计算属性都包含一个 getter 和 setter,之前的示例只是利用了 getter 来读取计算结果。在需要时,我们可以提供一个 setter 函数,当手动修改计算属性的值时,就会触发 setter 函数,可以在此函数中定义少量操作。例如:

html:

<div id="app2">    商品总价:{{totalPrice}}</div>

js:

var app2 = new Vue({    el: '#app2',    data: {        price: 28,        count: 3    },    computed: {        totalPrice: {            get: function () {//读取                return this.price * this.count;            },            set: function (val) {//写入                var array = val.split(',');                this.price = array[0];                this.count = array[1];            }        }    }});app2.totalPrice = '30,3';

输出结果:

商品总价:90

绝大多数情况下,只会用默认的 getter 方法来读取计算属性的值,很少用到 setter ,所以在公告一个计算属性时,可以直接使用之前详情的默认写法O(∩_∩)O~

4 依赖其它 Vue 实例

还可以依赖其它 Vue 实例中的数据或者计算属性。

html:

<div id="app3">    最终价格:{{actualPrice}}</div>

js:

var app3 = new Vue({    el: '#app3',    data: {},    computed: {        actualPrice: function () {            return app2.totalPrice * 0.8;        }    }});

输出结果:

最终价格:72

注意:引用的 Vue 实例必需在调用之前就已经定义好。

5 缓存

之前的示例代码,调用 methods 里定义的方法也可以起到与计算属性相同的作用。

既然使用 methods 即可以实现,那么为什么还需要用到计算属性呢?起因就是计算属性是基于它的依赖做了缓存。一个计算属性所依赖的数据发生变化时,它才会重新取值。

我们先定义一个休眠函数:

/** * 休眠 * @param n 休眠时间,单位为毫秒 */function sleep(n) {    var start = new Date().getTime();    while (true) {        if (new Date().getTime() - start > n) {            break;        }    }}

由于 js 是单线程的, 所以我们这里使用 while(true) {},使得 whlie(){} 后面的程序被阻塞,从而实现休眠 。

js:

var app4 = new Vue({    el: '#app4',    data: {},    computed: {        now: function () {            return Date.now();        }    }});console.log("app4.now:" + app4.now);sleep(3000);console.log("app4.now2:" + app4.now);var app5 = new Vue({    el: '#app5',    data: {},    methods: {        now: function () {            return Date.now();        }    }});console.log("app5.now:" + app5.now());sleep(3000);console.log("app5.now2:" + app5.now());

输出结果:

从结果中可以看出:计算属性 now 没有变化。但 methods 不同,只需重新调用,函数就会被执行。

当遍历大数组或者做大量计算时,建议使用自带缓存功能的计算属性哦O(∩_∩)O~

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 说说 Vue.js 的计算属性

发表回复