计算属性
-
模板内的表达式——用于简单运算的，不推荐放入太多逻辑
<div id="example"> {{ message.split('').reverse().join('') }} </div> 对于任何复杂逻辑，都应当使用计算属性
基础例子
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
<p>Computed reversed message: "{{ reversedMessageFunc() }}"</p>
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
},
methodes: {
reversedMessageFunc() {
return this.message.split('').reverse().join('')
}
}
})
-
vm.reversedMessage的值始终取决于vm.message的值 - 计算属性的 getter 函数是没有副作用 (side effect) 的
计算属性缓存 vs 方法
相同
在表达式中调用methods中的方法，可实现同样的效果
<p>Reversed message: "{{ reversedMessage() }}"</p>
不同
computed
计算属性是基于它们的响应式依赖进行缓存的
只在相关响应式依赖发生改变时它们才会重新求值
不改变响应式依赖，多次访问计算属性会立即返回之前的计算结果，而不必再次执行函数
methods
- 每当触发重新渲染时，调用方法将总会再次执行函数
计算属性 vs 侦听属性
Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性 watch
<div id="demo">{{ fullName }}</div>
侦听属性 watch
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
}
}
})
计算属性computed
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
// 计算属性fullName不需要在data定义
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
计算属性的 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]
}
}
}
// ...
侦听器
当需要在数据变化时执行异步或开销较大的操作时，推荐使用侦听属性watch
