Vue3-Watch踩坑-watch监听无效

ref 与 reactive

ref函数和reactive函数都是用来定义响应式数据

但是reactive更适合定义引用类型、ref适合定义基本数据类型（可接收基本数据类型和对象)

reactive

1、 深层次响应式，本质是将传入的数据包装成一个Proxy对象
2、 参数必须是对象或者数组，如果要让对象的某个元素实现响应式时，需要使用toRefs，这样每个都需要采用value方式访问

ref

1、函数参数可以是基本数据类型，也可以接受对象类型
2、如果参数是对象类型时，其实底层的本质还是reactive
3、ref响应式原理是依赖于Object.defineProperty()的get()和set()的

watch

在自身组件监听 reactive 对象

let a = reactive({
   test: 123, bg: 456, hh: {
   hhh: 78}})

// 定时器 1
setTimeout(() => {
   
  a.test = 456
}, 2000)
// 定时器 2
setTimeout(() => {
   
  a.hh.hhh = 56 
}, 4000)

// 定时器 3
setTimeout(() => {
   
  a = {
   }  
}, 6000)


// 
watch(a, () => {
   
  // 定时器1， 2 可以触发监听， 不需要deep也可以
  // 定时器3 不能触发监听， 因为对象的地址已经发生改变了
  console.log("change")
})

// 函数返回方式 采用deep可以监听, 不加deep不能监听 
watch(
  () => a,
  () => {
   
    console.log(" func change")
  },
  {