计算属性

  • 定义:要用的属性不存在,要通过已有属性计算得来
  • 原理:底层借助了Object.defineproperty方法提供的getter和setter
  • get函数什么时候执行?
    1. 初次读取时执行一次
    2. 所依赖的数据发生变化时再次调用
  • 优势:与methods实现相比,内部有缓存机制(复用),效率更高,调试方便
  • 备注:
    • 计算属性最终会出现在vm上,直接读取使用即可
    • 如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生变化
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<div id="root">
姓:<input type="text" v-model="firstName"><br><br>
名:<input type="text" v-model="lastName"><br><br>
全名:<span>{{fullName}}</span>
</div>
<script>

//阻止vue在启动时生成生产提示
Vue.config.productionTip = false;
//创建Vue实例
const vm = new Vue({
el:'#root',
data:{
firstName:'张',
lastName:'三'
},
computed:{
fullName:{
get(){
return this.firstName + '-' + this.lastName
},
set(value){
const arr = value.split('-');
this.firstName = arr[0];
this.lastName = arr[1]
}
}
}
})
</script>
  • get有什么作用?

    • 当有人读取fullName时,get就会被调用,且返回值就作为fullName的值
  • get什么时候被调用?

    1. 初次读取fullName时
    2. 所依赖的数据发生变化时
  • set什么时候被调用?

    • 当fullName被修改时

输出结果为:

image-20210928223935838

计算属性简写

只有当计算属性只考虑读取不考虑修改时才可使用

  • 完整写法:

    1
    2
    3
    4
    5
    6
    //完整写法
    fullName:{
    get(){
    return this.firstName + '-' + this.lastName
    }
    }
  • 简写:

    1
    2
    3
    4
    //简写
    fullName(){
    return this.firstName + '-' + this.lastName
    }