解决方法(数组触发两次)
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 ", , prev ); }, { deep: true } ); = "Alex"; // Logs: "deep " "Alex" "Alex"
引用
vue3官方文档