说说 Vue.js 的计算属性
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 的计算属性