笔记
1.定义:要用的属性不存在,要通过已有属性计算得来
2.原理:底层借助了object.defineproperty方法提供的getter和setter
3.get函数什么时候执行?
(1)初次读取时会执行一次
(2)当依赖的数据发生改变时会被再次调用
4.优势:与 methods实现相比,内部 有缓存机制(复用),效率更高,调试方便
5.备注:
1.计算属性最终会出现在VM上,直接读取使用即可
2.如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生改变
页面
<div id="root">
姓:<input type="text" v-model="firstName"><br/><br/>
名:<input type="text" v-model="lastName"><br/><br/>
全名:<span>{{fullName}}</span>
</div>
计算属性完整写法
computed:{
fullName: {
//get有什么作用?当有人读取fullname时,get就会被调用,其返回值就作为fullname的值
//get什么时候调用?1.初次读取fullname时 2.所依赖的数据发生变化时
get(){
// console.log(this)//此处的this是vm
return this.firstName + '-' + this.lastName
},
//set什么时候调用?当fullname被修改时
set(value){
const arr = value.split('-')
this.firstName = arr[0]
this.lastName = arr[1]
}
}
}
计算属性简写
computed:{
fullName() {
return this.firstName + '-' + this.lastName
}
}
watch实现
watch:{
firstName(val){
// this.fullName = val +'-' + this.lastName
///延迟已秒执行
setTimeout(() => {
this.fullName = val +'-' + this.lastName
}, 1000);
},
lastName(val){
this.fullName = this.firstName + '-' + val
}
}
computed和watch之间的区别:
1.computed能完成的功能,watch都可以完成
2.watch能完成的功能,computed不一定完成
两个重要的小原则
1.所被Vue管理的函数,最好写成普通函数,这样this的指向才是vm 或 组件实例对象
2.所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等),最好写成箭头函数,这样this的指向才是vm 或 组件实例对象
网友评论