vue3 使用watch监听数组问题

在vue3中使用watch的时候需要注意的事项很多, 其中需要一项需要注意的是在监听数组的时候假设在setup里面有这样的结构const test = reactive({arr: [1,2,3,4,5]})watch(test.arr,(now,old)=>{console.log(now,old)})当页面操作改变了arr时(不重新赋值, 使用push, splice等方法改变数组),

qq_251025116

16296人浏览 · 2021-07-30 15:30:02

qq_251025116 · 2021-07-30 15:30:02 发布

在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 }
);