vue3 watch 执行多次

在Vue3中，watch默认会执行多次，这是因为watch默认会监听对象的每一个属性，当对象的某个属性发生变化时，watch就会执行一次。如果我们只想监听对象的整个变化，而不是对象的每一个属性，可以使用`deep`选项来解决这个问题。同时，如果在组件中使用watch监听路由中的值，由于使用了keep-alive，会导致watch执行多次，可以通过去掉keep-alive或在onDeactivated中销毁watch来解决这个问题。

下面是两种解决方法的示例代码：

1. 使用`deep`选项监听对象的整个变化

const state = reactive({
  obj: {
    name: 'Tom',
    age: 18
  }
})

watch(state, (newVal, oldVal) => {
  console.log('state changed')
}, { deep: true })

2. 在onDeactivated中销毁watch

import { watch, onDeactivated } from 'vue'

export default {
  setup() {
    const destroyWatch = watch(
      () => route.query.id,
      val => {
        console.log(val)
      },
      { immediate: true }
    )

    onDeactivated(() => {
      destroyWatch()
    })
  }
}