计算属性
1.定义:要用的属性不存在,要通过已有属性(data中的,不是已有数据)计算得来。
2.原理:底层借助了Objcet.defineproperty方法提供的getter和setter。
3.get函数什么时候执行?
(1).初次读取时会执行一次。
(2).当依赖的数据发生改变时会被再次调用。
4.优势:与methods实现相比,内部有缓存机制(复用),效率更高,调试方便。
5.备注:
1.计算属性最终会出现在vm上,直接读取使用即可。
2.如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生改变。
关于小括号究竟有没有?
事件绑定时,函数的小括号加不加都行。
@click=“fun” 不带括号、不写实参
fun函数默认传递event (事件对象),在fun函数中可以直接使用$event。
@click=“fun(value)” 加了括号
只要加括号,无论是否传值,都属于传实参给函数,event (事件对象)就接收不到。
如果需要实参、又需要event (事件对象),就需要手动传入 event (事件对象),如下:
@click=“fun($event, value)”
插值语法 {{***}} 时,
对于data中的属性,计算属性 均不加小括号
(虽然简写的计算属性长得和函数一样,但他不是函数)
对于methods方法
{{ fun }} 是函数内容,会将整个函数放到页面上
{{ fun( ) }} 会将函数的返回值放到页面上
我决定,凡是和方法有关的统统加括号(包括事件绑定和插值语法调用methods方法)。(ˇˍˇ)
姓名案例
插值语法实现
<body>
<div id="root">
姓:<input type="text" v-model="firstName"> <br><br>
名:<input type="text" v-model="lastName"> <br><br>
<!-- firstName截取前三位 slice(0,3)第0,1,2位,不包括第三位 -->
全名:<span>{{firstName.slice(0,3)}}-{{lastName}}</span>
</div>
</body>
<script>
new Vue({
el:'#root',
data:{
firstName:'张',
lastName:'三',
}
})
</script>
methods实现
<body>
<div id="root">
姓:<input type="text" v-model="firstName"> <br><br>
名:<input type="text" v-model="lastName"> <br><br>
<!-- firstName截取前三位,使用methods实现 -->
<!-- {{fullName}}是函数内容
{{fullName()是这个函数的返回值
绑定事件时加不加括号均可,这里是用在插值语法中}} -->
全名fullName:<span>{{fullName}}</span> <br><br>
全名fullName():<span>{{fullName()}}</span>
</div>
</body>
<script>
new Vue({
el:'#root',
data:{
firstName:'张',
lastName:'三',
},
methods: {
fullName(){
return this.firstName + '-' + this.lastName
}
},
})
</script>
计算属性实现
<body>
<div id="root">
姓:<input type="text" v-model="firstName"> <br><br>
名:<input type="text" v-model="lastName"> <br><br>
全名:<span>{{fullName}}</span>
</div>
</body>
<script>
new Vue({
el:'#root',
//属性
data:{
firstName:'张',
lastName:'三',
},
//计算属性
//缓存
computed:{
fullName:{
//get和set也不能写成箭头函数
//当有人读取fullName时,get函数就会被调用,且返回值就作为fullName的值
//vue使get函数的this为vm
//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>
计算属性的简写
<body>
<div id="root">
姓:<input type="text" v-model="firstName"> <br><br>
名:<input type="text" v-model="lastName"> <br><br>
全名:<span>{{fullName}}</span>
</div>
</body>
<script>
new Vue({
el:'#root',
data:{
firstName:'张',
lastName:'三',
},
computed:{
//确定不会修改fullname,只读不改得时候可以采用简写形式,去掉set
// fullName:function(){
// return this.firstName + '-' + this.lastName
// }
fullName(){
return this.firstName + '-' + this.lastName
}
}
})
</script>