提示:该文章为笔者的个人笔记并不是权威,如有错误,谢谢指出。
计算属性
模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。所以,对于任何复杂逻辑,你都应当使用计算属性。
一、基础例子
<div id="root">
姓:<input type="text" v-model="firstName"> <br>
名:<input type="text" v-model="lastName"> <br>
全名:全名:<span>{{fullName}}</span>
</div>
<script>
const vm = new Vue({
el: "#root",
data: {
firstName: "张",
lastName: "三",
},
computed: {
// 当fullName被读取时,get就会被调用,且返回值做为fullName的值
get() {
return this.firstName + '-' + this.lastName
},
// 当fullName被修改时,调用set
set(value) {
const arr = value.split('-')
this.firstName = arr[0]
this.lastName = arr[1]
}
}
})
</script>
二、计算属性简写
<div id="root">
姓:<input type="text" v-model="firstName"> <br>
名:<input type="text" v-model="lastName"> <br><br>
全名:全名:<span>{{fullName}}</span>
</div>
<script>
const vm = new Vue({
el: "#root",
data: {
firstName: "张",
lastName: "三",
},
computed: {
// 不设置set,只设置get,将返回值传递给fullName
fullName() {
return this.firstName + '-' + this.lastName
}
}
})
</script>
总结
- 计算属性:要调用的属性不存在,通过已有的属性计算得来。
- 原理借助底层的底层借助Object.defineProperty方法提供的getter和setter实现。
- getter初次读取时执行一次,当依赖的属性变化时再次被调用。
- 与methods相比,内部有缓存机制(复用),效率更高,调试方便。