目录
前言
computed
watch
watch侦听ref数据
ref简单数据类型
ref复杂数据类型
watch侦听reactive数据
前言
本文介绍在vue3中的computed计算属性和watch侦听属性。介绍watch如何侦听被ref和reactive包裹的数据
computed
在vue3中，计算属性computed也是组合式api，也就是说要先引入，再在setup中使用
语法
完整：
let 自定义 = computed({
get(){
return
},
set(val){
}
})
当不使用set时，
可以简写
let 自定义 = computed(()=>{
return
})
如下
反转案例
watch
watch侦听属性也是组合式api，所以也需要先引入然后再setup中使用
watch侦听ref数据
ref简单数据类型
watch(监听的属性，(newValue,oldValue)=>{})
ref复杂数据类型
watch(.value,(newValue,oldValue)=>{})
由这篇文章可知，ref包裹复杂数据类型底层使用的是object.defineProperty+Proxy。.value代表的就是Proxy代理对象
这种方法获取不到oldValue
1
使用
watch(复杂数据对象，（newValue,oldValue）=>{})
这种方法是无法监听对象里面的内容的
因为直接监听复杂数据对象，默认deep是false的
要手动开启deep:true
watch(复杂数据对象，（newValue,oldValue）=>{},{deep:true})
watch侦听reactive数据
watch(复杂数据对象，（newValue,oldValue）=>{})
获取不到旧值
被reactive包裹的复杂数据类型可以直接监视复杂数据对象。但是，这种方法默认是开启了深度监视，是关不掉的。deep:false是无效的。所以，复杂对象里面任意数据发生改变都会被监视
watch(()=>复杂数据对象.要被监视的属性，（newValue,oldValue）=>{})
这样就可以监视单一的属性
可以获取到旧值
如下图，宽度增加是没有触发监听的，只有高度增加时才会触发监听。
数组的形式监听多个属性
watch([ ()=>复杂数据对象.要被监视的属性,()=>复杂数据对象.要被监视的属性],(newValue,oldValue)=>{})
