vue3 watch 监听数组 对象

解决方法（数组触发两次）

const numbers = reactive([1, 2, 3, 4])

watch(
  () => [...numbers],
  (numbers, prevNumbers) => {
    console.log(numbers, prevNumbers);
  })

numbers.push(5) // logs: [1,2,3,4,5] [1,2,3,4]

解决的问题

1、数组deep监听触发两次
2、新旧值一致

对象

尝试检查深度嵌套对象或数组中的属性更改仍然需要deep选项为true
Attempting to check for changes of properties in a deeply nested object or array will still require the deep option to be true

const state = reactive({ 
  id: 1, 
  attributes: { 
    name: "",
  },
});

watch(
  () => state,
  (state, prevState) => {
    console.log(
      "deep ",
      state.attributes.name,
      prevState.attributes.name
    );
  },
  { deep: true }
);

state.attributes.name = "Alex"; // Logs: "deep " "Alex" "Alex"

引用

vue3官方文档