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 相关文章推荐
js 绑定带参数的事件以及手动触发事件
Apr 27 Javascript
JS重要知识点小结
Nov 06 Javascript
js识别不同浏览器基于userAgent做判断
Jul 29 Javascript
24款热门实用的jQuery插件推荐
Dec 24 Javascript
jQuery EasyUI Tab 选项卡问题小结
Aug 16 Javascript
js实现上传文件添加和删除文件选择框
Oct 24 Javascript
JS实现给对象动态添加属性的方法
Jan 05 Javascript
jQuery实现的浮动层div浏览器居中显示效果
Feb 03 Javascript
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
js input输入百分号保存数据库失败的解决方法
May 26 Javascript
Vue中&quot;This dependency was not found&quot;问题的解决方法
Jun 19 Javascript
node.js +mongdb实现登录功能
Jun 18 Javascript
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 服务器调试 Zend Debugger 的安装教程
2009/09/25 PHP
解析php中的escape函数
2013/06/29 PHP
smarty缓存用法分析
2014/12/16 PHP
分享php分页的功能模块
2015/06/16 PHP
PHP下载远程图片并保存到本地方法总结
2016/01/22 PHP
用javascript获取地址栏参数
2006/12/22 Javascript
用ADODB.Stream转换
2007/01/22 Javascript
jquery对象和DOM对象的区别介绍
2013/08/09 Javascript
Javascript实现页面跳转的几种方式分享
2013/10/26 Javascript
JQuery删除DOM节点的方法
2015/06/11 Javascript
jQuery+css3实现文字跟随鼠标的上下抖动
2015/07/31 Javascript
JS模仿手机端九宫格登录功能实现代码
2016/04/28 Javascript
去除html代码里面的script正则方法
2016/05/19 Javascript
微信小程序 地图map详解及简单实例
2017/01/10 Javascript
Bootstrap禁用响应式布局的实现方法
2017/03/09 Javascript
详解Vue 动态添加模板的几种方法
2017/04/25 Javascript
jQuery接受后台传递的List的实例详解
2017/08/02 jQuery
浅谈如何优雅处理JavaScript异步错误
2019/11/12 Javascript
JavaScript对象原型链原理解析
2020/01/22 Javascript
[01:02:25]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS VG
2014/05/25 DOTA
教你安装python Django(图文)
2013/11/04 Python
在Django下创建项目以及设置settings.py教程
2019/12/03 Python
python将图片转base64,实现前端显示
2020/01/09 Python
Python中断多重循环的几种方式详解
2020/02/10 Python
Python使用pyexecjs代码案例解析
2020/07/13 Python
python简单利用字典破解zip文件口令
2020/09/07 Python
css3圆角样式分享自定义按钮样式
2013/12/27 HTML / CSS
电大本科自我鉴定
2014/02/05 职场文书
小学作文评语大全
2014/04/21 职场文书
高中生逃课检讨书
2014/10/10 职场文书
公务员政审个人总结
2015/02/12 职场文书
2015学校年度工作总结
2015/05/11 职场文书
交通事故被告代理词
2015/05/23 职场文书
幼儿园班级工作总结2015
2015/05/25 职场文书
六年级作文之预言作文
2019/10/25 职场文书
SQLServer之常用函数总结详解
2021/08/30 SQL Server