计算属性
定义:要用得属性不存在,要通过已有得属性计算得来
原理:底层借用了Object.defineproperty方法提供得getter和setter
- 要显示的数据不存在,要通过计算得来
- 在computed对象中定义计算属性
- 在页面中使用{{方法名}}来计算的结果
备注:
- 计算属性最终会出现在vm(Vue对象)上,直接读取使用即可
- 如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生变化
computed中需要写入对象
get方法
<input v-model="firstName">
<input v-model="secondName">
<span>{{fullName}}</span>
var vm = new Vue({
el:"#root",
data:{
firstName:"zhang",
lastName:"san"
},
//计算属性
computed:{
fullName:{
get(){
return this.firstName + this.lastName
}
}
}
})
computed的对象中写入get方法,当有人读取对象的时候,get就会被调用,且返回值就作为对象的的值
<span>{{fullName}}</span>
<span>{{fullName}}</span>
<span>{{fullName}}</span>
<span>{{fullName}}</span>
但是我们多次在页面中使用fullName的时候,发现在控制台中只输出一次"get被调用",这是因为计算属性是有缓存的,只调用一次
那么我们会想到一个问题:如果我们中途将fullName的值改变,但是页面还是使用缓存中的fullName,那么这样子并不是我们想要的结果
get方法什么时候调用:
- 初次读取fullName时
- 所依赖的数据发生变化时
set方法
var vm = new Vue({
el:"#root",
data:{
firstName:"zhang",
lastName:"san"
},
//计算属性
computed:{
fullName:{
get(){
return this.firstName + this.lastName
},
// value就是fullName的是值
set(value){
const arr = value.split('-')
// 修改fullName值,同时修改firstName和lastName
this.firstName = arr[0]
this.lastName = arr[1]
}
}
}
})