Vuejs --04 计算属性
一、使用原因
1、模板中表达式很便利，但实际上只适用于简单的运算，不适宜放入太多逻辑运算，例如：
<div id="example">
{{ message.split('').reverse().join('') }}
</div>所以： 任何复杂逻辑，你都应当使用计算属性
二、使用方法
<div id="app">
你好{{ ComMessage }}
<p>{{ ComMsg() }}</p>
</div>
var vm = new Vue({
el: '#app',
data: {
message: 'hello world'
},
computed: {
ComMessage: function(){
return this.message.split('').reverse().join(''); //this 指向vm实例
}
},
method: {
ComMsg: function(){
return this.message.split('').reverse().join(''); //this 指向vm实例
}
}
});三、计算属性 VS 函数方法methods
1、同：如上例子，结果都是一样
2、异：计算属性能基于它们的依赖进行缓存， 计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结 果，而不必再次执行函数。
//意味着下面的计算属性将不再更新，因为 Date.now() 不是响应式依赖：
computed: {
now: function () {
return Date.now()
}
}3、综上，使用计算属性还是methods，取决于是否希望有缓存
四、computed属性 VS watch属性
<div id="demo">{{ fullName }}</div>
======================================================
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function(val) {
this.fullName = val + ' ' + this.lastName
},
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 计算属性默认只有 getter ，不过在需要时你也可以提供一个 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]
}
}
}
// ...六、Watchers 当你想要在数据变化响应时，执行异步操作或开销较大的操作，很有用。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017-08-14 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读