Vue3 使用watch监听被赋值的数组问题

在vue3中使用watch的时候需要注意的事项很多, 其中需要一项需要注意的是在监听数组的时候

假设在setup里面有这样的结构 

const state= reactive({
 
    arr: [1,2,3,4,5]
    
})
 
 watch(state.arr,(now,old)=>{
      console.log(now,old)
 })

当页面操作改变了arr时(不重新赋值, 使用push, splice等方法改变数组), 可以正常出发watch函数, 但是你会发现now和old输出的值是一样的, 这个还可以接收, 至少能触发watch函数, 但是你一旦重新给arr赋值了, 比如给arr数组清空了 test.arr = [] ; 那么你会发现监听失效了, 那么要怎么解决呢, 很简单 改成以下写法即可

watch(() => [...state.arr], (now, old) => {
    console.log(now, old)
})

如果是对象的话使用下面的写法,但是比较遗憾, 这里的now和old都是一样的值(改变单一属性的情况下)

const state= reactive({
 
    obj: {name:'name',age:18}
    
})
 
 
watch(
  () => state.obj,
  (now, old) => {
    console.log(now,old);
  },
  { deep: true }
);

————————————————

                            版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
                        
原文链接：https://blog.csdn.net/qq_24882601/article/details/119248554