1.计算属性
data中的数据任何一个数据一旦发生变化,模板就会重新解析,方法用到变化的数据,方法也会重新调用一次。
对于vue来说,data中的数据即是属性
1.定义:要用的属性不存在,要通过已有的属性计算得来;
2.原理:底层借助了Object.defineproperty方法提供getter和setter;
3.get函数什么时候执行?
(1)初次读取时候会执行一次
(2)当依赖的数据发生改变时会被再次调用
4.优势:缓存机制。与methods相比,内部的缓存机制使得效率更高,调试方便
5.备注:
(1)计算属性最终会出现在vm上,直接读取使用即可
(2)如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生改变。
计算属性简写:在确定计算属性只读不改的时候可以用简写形式
// 计算属性get方法
computed: {
fullName:{
// get的作用:当有人读取fullName时,get就会被调用,且返回值就作为fullName的值
// get什么时候被调用?1.初次读取fullName的时候;2.所依赖的数据发生变化的时候。
get() {
return this.firstName + '-' + this.lastName;
}
}
}
// 计算属性简写(在确定计算属性只读不改的时候可以用简写形式),==在调用时不加括号==
computed: {
fullName() {
return this.firstName + '-' + this.lastName;
}
}
2.监视属性
1.代码书写格式
watch:{
ishot:{
// 初始化时让handler执行一下
immediate: true
// 监视多层级的改变
deep: true
handler(){
console.log("修改了天气")
}
}
},
// 简写形式
watch:{
ishot(){
console.log("修改了天气")
}
},
1.监视属性必须存在才能监视;
2.不需要immediate和deep的时候可以简写。
watch和computed的对比:
1.computed能完成的功能,watch都可以完成,watch能完成的功能,computed不一定能完成
(计算属性不能开启异步任务(定时器),因为计算属性是有return返回值的)
2.两个重要的原则:
(1)被vue所管理的函数最好写成普通函数,这样的this的指向才是vm或者是vc(组件实例对象)
(2)所有不被vue所管理的函数(定时器的回调函数,ajax的回调函数等),最好写成箭头函数,这样的this的
指向才是vm或vc(组件实例对象)