Vue.js教程之计算属性


Posted in Javascript onNovember 11, 2016

Vue.js 的内联表达式非常方便,但它最合适的使用场景是简单的布尔操作或字符串拼接。如果涉及更复杂的逻辑,你应该使用计算属性。

计算属性是用来声明式的描述一个值依赖了其它的值。当你在模板里把数据绑定到一个计算属性上时,Vue 会在其依赖的任何值导致该计算属性改变时更新 DOM。这个功能非常强大,它可以让你的代码更加声明式、数据驱动并且易于维护。

通常情况下,使用计算属性会比使用过程式的$watch回调更合适。比如下面的例子:

<div id="demo">{{fullName}}</div>
var vm = new Vue({
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
}
})
vm.$watch('firstName', function (val) {
this.fullName = val + ' ' + this.lastName
})
vm.$watch('lastName', function (val) {
this.fullName = this.firstName + ' ' + val
})

上面的代码是过程式的,并且比较笨重。对比一下计算属性的版本:

var vm = new Vue({
el:'#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})

是不是感觉好多了?另外,你还可以为计算属性提供一个 setter:

computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}

计算属性缓存

在 0.12.8 之前,计算属性仅仅体现为一个取值的行为 —— 每次你访问它的时候,getter 都会重新求值。在 0.12.8 中对此做了改进 —— 计算属性的值会被缓存,只有在其某个反应依赖改变才会重新计算。

设想我们有一个开销很大的计算属性 A,它需要循环一个大数组并且完成很多运算。并且我们还有一个依赖 A 的计算属性。如果没有缓存,我们对 A 的 getter 不必要的过度调用就会导致潜在的性能问题。而有了缓存,A 的值会被缓存起来,除非其依赖发生了变化,这样访问它再多次也不会导致大量的不必要运算了。

然而,我们还是应该理解什么会被视为“反应式依赖”:

var vm = new Vue({
data: {
msg: 'hi'
},
computed: {
example: {
return Date.now() + this.msg
}
}
})

在上面的例子中,计算属性依赖 vm.msg。因为这是一个在 Vue 实例中被观察的数据属性,那么它就被视为了一个反应式依赖。无论何时 vm.msg 改变,vm.example 的值都会被重新计算。
然而,Date.now()并不是反应式依赖,因为它没有和 Vue 的数据观察系统发生任何关系。因此,当你在程序中访问vm.example时,你会发现除非vm.msg触发了一次重新计算,否则时间戳始终是相同的值。

有的时候你需要保留简单获取数据的模式,每次你访问 vm.example 的时候都希望触发重新计算。从 0.12.11 开始,你可以为一个特殊的计算属性开关缓存支持:

computed: {
example: {
cache: false,
get: function () {
return Date.now() + this.msg
}
}
}

现在,每次你访问 vm.example 的时候,时间戳都会及时更新。然而,要注意这只发生在 JavaScript 程序内部访问的时候,数据绑定还是依赖驱动的。当你在模板中绑定一个 {{example}} 的计算属性时,DOM 只会在反应式依赖改变时才会更新。

以上所述是小编给大家介绍的Vue.js教程之计算属性,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery中常用的函数和属性详细解析
Mar 07 Javascript
javascript实现数独解法
Mar 14 Javascript
JS Array创建及concat()split()slice()的使用方法
Jun 03 Javascript
JS实现漂亮的时间选择框效果
Aug 20 Javascript
Vue.js实现简单ToDoList 前期准备(一)
Dec 01 Javascript
想用好React的你必须要知道的一些事情
Jul 24 Javascript
如何抽象一个Vue公共组件
Oct 17 Javascript
详解KOA2如何手写中间件(装饰器模式)
Oct 11 Javascript
浅谈vue3中effect与computed的亲密关系
Oct 10 Javascript
js实现录音上传功能
Nov 22 Javascript
基于JavaScript判断两个对象内容是否相等
Jan 10 Javascript
jquery css实现流程进度条
Mar 26 jQuery
JS控制TreeView的结点选择
Nov 11 #Javascript
node+express制作爬虫教程
Nov 11 #Javascript
html中鼠标滚轮事件onmousewheel的处理方法
Nov 11 #Javascript
Angularjs中的页面访问权限怎么设置
Nov 11 #Javascript
jquery.multiselect多选下拉框实现代码
Nov 11 #Javascript
通过扫描二维码打开app的实现代码
Nov 10 #Javascript
用JS动态设置CSS样式常见方法小结(推荐)
Nov 10 #Javascript
You might like
php 空格,换行,跳格使用说明
2009/12/18 PHP
解析php时间戳与日期的转换
2013/06/06 PHP
PHP解析RSS的方法
2015/03/05 PHP
php中static 静态变量和普通变量的区别
2016/12/01 PHP
动态为事件添加js代码示例
2009/02/15 Javascript
动态的绑定事件addEventListener方法的使用
2014/01/24 Javascript
再探JavaScript作用域
2014/09/24 Javascript
Nodejs中session的简单使用及通过session实现身份验证的方法
2016/02/04 NodeJs
JavaScript获取键盘按键的键码(参照表)
2017/01/10 Javascript
express+mockjs实现模拟后台数据发送功能
2018/01/07 Javascript
this在vue和小程序中的使用详解
2019/01/28 Javascript
vue通过数据过滤实现表格合并
2020/11/30 Javascript
Python正则表达式的使用范例详解
2014/08/08 Python
采用Psyco实现python执行速度提高到与编译语言一样的水平
2014/10/11 Python
在Python 2.7即将停止支持时,我们为你带来了一份python 3.x迁移指南
2018/01/30 Python
Python基于多线程实现抓取数据存入数据库的方法
2018/06/22 Python
python3使用GUI统计代码量
2019/09/18 Python
在Python中利用pickle保存变量的实例
2019/12/30 Python
Python semaphore evevt生产者消费者模型原理解析
2020/03/18 Python
Keras在训练期间可视化训练误差和测试误差实例
2020/06/16 Python
今天学到的CSS最新技术(与图片背景相关)
2012/12/24 HTML / CSS
瑰珀翠美国官网:Crabtree & Evelyn美国
2016/11/29 全球购物
澳大利亚汽车零部件、音响及配件超市:Automotive Superstore
2018/06/19 全球购物
俄罗斯美容和健康网上商店:Созвездие Красоты
2019/07/23 全球购物
全球最大的瓷器、水晶和银器零售商:Replacements
2020/06/15 全球购物
下面关于"联合"的题目的输出是什么
2013/08/06 面试题
为什么说Ruby是一种真正的面向对象程序设计语言
2012/10/30 面试题
电气技术员岗位职责
2013/11/19 职场文书
外语学院毕业生的自我鉴定
2013/11/28 职场文书
家长对老师的感言
2014/03/11 职场文书
电子商务专业毕业生求职信
2014/06/12 职场文书
个人先进事迹材料
2014/12/29 职场文书
小学三八妇女节活动总结
2015/02/06 职场文书
MySQL 逻辑备份与恢复测试的相关总结
2021/05/14 MySQL
Python-OpenCV教程之图像的位运算详解
2021/06/21 Python
SQL Server的存储过程与触发器以及系统函数和自定义函数
2022/04/10 SQL Server