计算属性
设计的初衷是为了简化模板中的逻辑,可以将简单的计算赋值给一个新的元素
基础例子
<div>
<p>{{ message }}</p>
<p>{{ reversedMessage }}</p>
<p>{{ message.split('').reverse().join('') }}</p>
</div>
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vue 实例
return this.message.split('').reverse().join('')
}
}
this.reversedMessage 的值始终取决于 this.message 的值。因此当 this.message 发生改变时,this.reversedMessage 也会更新
计算属性缓存 vs 方法
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
写法不一样
methods: {
reversedMessage () {
return this.message.split('').reverse().join('')
}
}
两种方式的最终结果确实是完全相同的。但是计算属性是根据它的依赖而进行缓存更新的,只有在依赖改变时,才会触发执行,如果依赖不改变,那么该计算属性只会取上一次的值,而方法每当触发重新渲染时,总会再次执行函数。
注意:如果计算属性依赖的值不是响应式的,那么计算属性就不会更新
computed: {
now: function () {
return Date.now()
}
}
计算属性的 setter
计算属性默认只有 getter ,不过在需要时你也可以提供一个 setter
computed: {
fullName: {
get() {
return this.firstName + ' ' + this.lastName
},
set(newVal){
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
},
现在再运行 this.fullName = ‘John Doe’ 时,setter 会被调用,this.firstName 和 this.lastName 也会相应地被更新。
侦听器
类似计算属性,某个属性发生改变时,便会执行某个方法
watch
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName (val) {
this.fullName = val + ' ' + this.lastName
},
lastName (val) {
this.fullName = this.firstName + ' ' + val
}
}
computed
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName () {
return this.firstName + ' ' + this.lastName
}
}
})
对比一下就会发现,computed更简洁,watch是命令式且重复的,因此当有一些数据需要随着其它数据变动而变动时,更多的选择应该是computed
在数据变化需要执行异步或开销较大的操作时,使用watch