vue中的computed计算属性
模板内可以是变量,可以是变量的逻辑表达式,也可以是方法。
{{ message }}
{{ message.split('').reverse().join('') }}
{{ messageFunction }}
以上均可,模板内尽量使用简洁的声明变量,这些复杂的表达式或者方法会使模板很重难以维护,这个时候需要用到计算属性
既然说计算属性和方法都能渲染,那区别是什么呢?
计算属性基于它们的响应式依赖进行缓存的,即变量发生变化以后才会执行计算函数,如果变量没有发生变化则每次页面渲染取得是缓存中的值。而方法是每次页面重新渲染都会执行方法。
<div id="example">
<p>{{ fullName }}</p>
<button @click="changeName">点击</button>
</div>
<script>
var vm = new Vue({
el: '#example',
data () {
return {
firstName: 'zhang',
lastName: 'sa1n'
}
},
computed: {
fullName () {
return this.firstName + '' + this.lastName
}
},
methods: {
changeName () {
vm.fullName = 'John Doe'
}
}
})
</script>
当想操作computed中的属性时,比如通过一个点击事件改变fullName的值。上面computed的写法是错误 的,此时控制台会报错
vue.js:634 [Vue warn]: Computed property “fullName” was assigned to but it has no setter.(found in )
因为changeName方法中的vm.fullName = 'John Doe’是给computed中的fullName重新赋值,setter 会被调用,computed中有默认的getter,但是没有setter,需要在set中进行操作
正确写法:
fullName: {
get: function () {
return this.firstName + '' + this.lastName
},
set: function (newValue) {
console.log(newValue) // John Doe
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}