一、computed : 动态计算属性(跟普通属性区别在于访问该属性时需要计算才能拿到)
//设置属性值和读取属性值的例子
const vm = new Vue({
data:{
n:1 //数据 n
},
conmputed{
setReadN:{
get(){ //读取 n
return this.n
},
set(value){ //设置n
this.n=value
}
}
},
template:`{{setReadN}}`
})
vm.setReadN //1
vm.setReadN = 2 //
vm.setReadN //2
//这就是动态计算属性注意：setReadN依赖数据data.n，当data.n发生改变。template里的setReadN会被触发重新计算该值。还有一点如果给data.n赋值跟上次一样的值是不会触发setReadN的。因为有缓存对比。如果值一样不发生改动
总结：
1. computed：该对象的属性具有动态计算
2. 该对象的属性所依赖的值发生改变,会触发该对象属性的 get
3. 该对象的属性的值会有缓存在set时,值相同不会触发get二、watch ：是监听的意思,如果数据发生了变化了则调用被绑定的函数
const vm = new Vue({
data:{
n:0,
obj:{
a:'a'
}
},
watch:{
n:function(newValue,oldValue){
console.log(`我从${oldValue}变成了${newValue}`)
},
obj:function(){
console.log('obj发生了变化')
},
'obj.a':function(){
console.log('obj.a发生了变化')
}
}
})
vm.n = 1 //调用 watch.n
vm.obj = {a:'a'} //调用 watch.obj
vm.obj.a = 'b' //调用 watch.obj.a注意：
- 普通数据类型在watch里面主要用===发现值是否发生了变化
- 对象类型主要是看所引用的地址是否发生了变化
- 对象属性进行监听时，需要成字符串‘obj.a’
- 对象引用地址发生改变属性没变监听对象生效,监听对象属性不生效。反之亦然
watch有两个选项：immediate 和 deep
1.immediate 立即生效(监听时就生效) ：例：
new Vue({
data:{
n:0
},
watch:{
n:{
handler: 'change',
immediate: true //该属性为true 在n为0时(第一次渲染)调用change函数
}
},
methods:{
change(){
console.log('第一次渲染也要触发该函数')
}
}
})注意：immediate为true监听开始就触发该change函数
2.deep (观察对象属性发生改变时则生效该对象的监听)例：
const vm = new Vue({
data:{
obj:{
a:'a'
}
},
watch:{
obj:{
handler: 'change',
deep:true //deep为true时该对象的属性发生改变时,调用该change函数
}
},
methods:{
change(){
console.log('obj的属性发生改变了')
}
}
})
vm.obj.a = 'b' //deep为true监听该对象属性,该对象属性发生改变调用change函数注意：deep为false则不监听该对象的属性。为true则监听改变则调用change
总结：
1. watch主要是监听data里的数据
2. 普通类型检查其值是否发生了改变。对象检查其引用的地址是否发生了改变
3. 没设置deep时,对象改变其属性没变则生效监听对象。对象属性改变时不影响该对象的监听
4. immediate 为 true 时监听就生效
5. deep 为 true 时,该对象的属性发生改变则该对象的监听生效
