1.定义:要用的属性不存在,要通过已有的计算得来
2.原理:底层借助了Object.defineproperty方法提供的getter和setter
3.get函数什么时候执行:
a.初次读取时执行一次
b.当依赖的数据发生改变时被再次调用
4.优势:与method实现相比,内部有缓存机制实现复用效果,效率更高,调试更方便
5.备注:
a.计算属性最终出现在vm上,直接读取使用即可,不需要添加.get读取
b.如果计算属性要修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生改变
下面举例说明:
根据姓和名的数据得到全名,然后点击全名内容修改全名的值,对应的姓和名对应修改
<div id="root">
姓:<input type="text" v-model="firstname" /><br>
名:<input type="text" v-model="lastname" /><br>
//计算属性最终出现在vm上,直接读取使用即可,不需要添加.get读取
全名:<span @click="change">{{fullname}}</span>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
new Vue({
el:"#root",
data:{
firstname:"",
lastname:""
},
methods:{
change(){
this.fullname="李-四"
}
},
computed:{
fullname:{
get(){
//当姓和名都不为空的时候,返回姓-名
if(this.firstname && this.lastname){
return this.firstname + "-" + this.lastname
}
return ""
},
//如果计算属性要修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生改变
set(value){
console.log(value)
this.firstname = value.split("-")[0]
this.lastname = value.split("-")[1]
}
}
}
})
</script>
运行,computed的值会直接显示在开发者工具中,便于调试
点击上图的张-三得到:
当确定computed只有get没有set的时候,可简写:
<div id="root">
姓:<input type="text" v-model="firstname" /><br>
名:<input type="text" v-model="lastname" /><br>
全名:<span>{{fullname}}</span><br>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
new Vue({
el:"#root",
data:{
firstname:"",
lastname:""
}
computed:{
fullname(){
console.log("调用了get")
if(this.firstname && this.lastname){
return this.firstname + "-" + this.lastname
}
return ""
}
}
})
</script>