computed : Vue提供的一个配置项
注意: 当data中的数据发生变化,页面中的指令和表达式会重新计算, 有时候不相关数据变化会导致一直重新计算,所以这里引出了计算属性
-
如何使用?
computed 和 data同级,计算属性写在computed中;
写起来像方法;
用起来像属性。
-
特点(注意点):
1)一定要有返回值。
2)可以使用data中的已知值。
3)只要跟计算属性相关的数据发生了变化,计算属性就会重新计算,不相关的属性无论如何变化,都不会导致计算属性变化。
4)计算属性名不能和data中的数据重名(因为要使用data中的数据)
-
什么时候使用?
想要根据data中的已知值,得到一个新值,并且这个新值会随着相关数据的变化而变化
const vm = new Vue({
el: "#app",
data:{
msg: 'hello vue'
},
computed:{
reverseMsg(){
/*
新增computed属性,在这个属性中
新增一个方法,在方法中 return 值
计算属性写法是函数,但是 编译到实例上是一个属性
*/
return this.msg.split('').reverse().join("")
}
}
})
/*
计算属性优势:
1,计算属性在 首次计算后,会基于依赖(可以依赖多个值)进行缓存,首次计算后的值
在多次使用这个计算属性时,如果依赖的值没有变化,不会重新调用,而会使用缓存的值
*/
/*
注意:
1,新增一个计算属性时,不要和 data中已经存在的 或者 实例上已经存在的其他属性重名
2,默认 计算属性 是 不能被修改的 会破坏,和 依赖之间的关系
如果要修改,应该去修改依赖
如果修改计算属性 计算属性要写 完整写法 必须要加上setter 在setter中 去修改
*/
const vm = new Vue({
el: "#app",
data:{
num: 20
},
methods:{
changeNum2(){
// 直接修改计算属性
this.num2 = 100
}
},
computed:{
num2:{
get(){
console.log("获取了")
return this.num*2
},
set(val){
console.log('设置值了'+val)
this.num = val/2
}
}
}
})