vue3watch可以写到onMounted里边吗

可以的。在Vue 3中，可以使用新的`watchEffect`函数来替代Vue 2的`$watch`和`watch`选项。而`watchEffect`可以在组件渲染后（`onMounted`）执行，所以你可以在`onMounted`中使用`watchEffect`来实现类似于Vue 2中在`watch`选项中使用的功能。例如：

import { onMounted, watchEffect } from 'vue'

export default {
  setup() {
    onMounted(() => {
      watchEffect(() => {
        // 在这里写需要监听的响应式数据的变化后要执行的逻辑
      })
    })
  }
}

相关问题

vue3 watch用法

Vue3中的watch API与Vue2中的watch API使用方式有所不同。Vue3中的watch API提供了两种使用方式：基于函数的watch和基于API的watch。

1. 基于函数的watch

基于函数的watch使用方式与Vue2中的watch API类似。需要在组件中使用$watch API，并传入一个函数作为watch的回调函数。当被监听的数据发生变化时，回调函数会被触发。

import { watch, reactive } from 'vue'

export default {
  setup() {
    const state = reactive({
      count: 0
    })

    watch(() => state.count, (newVal, oldVal) => {
      console.log(`count的值从${oldVal}变成了${newVal}`)
    })

    return {
      state
    }
  }
}

2. 基于API的watch

基于API的watch使用方式与基于函数的watch有所不同。需要调用组件实例的watch API，并传入被监听的数据和回调函数。

import { onMounted, watchEffect, ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    onMounted(() => {
      setInterval(() => {
        count.value++
      }, 1000)
    })

    watchEffect(() => {
      console.log(`count的值为${count.value}`)
    })

    return {
      count
    }
  }
}

基于API的watch还支持一些高级用法，如监听多个数据、设置监听的深度、设置监听的类型等，具体可以参考Vue3文档。

vue3 watch store

### 如何在 Vue 3 中监听 Store 的变化

为了实现对 Vuex store 变化的监听，在 Vue 组件内部可以利用 `watch` 或者组合式 API 提供的 `watch` 函数来监视特定状态的变化。下面展示两种方式：

#### 使用选项式API中的 Watcher 监听 Store 数据改变

当采用传统的选项式 API 编写组件时，可以在 setup 方法之外通过定义 watcher 来响应 store 状态更新。

import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['someState'])
  },
  watch: {
    someState(newValue, oldValue) {
      console.log('Store state changed:', newValue);
    }
  }
}

此方法适用于简单的场景，并且能够清晰地看到被观察的状态以及对应的处理逻辑[^1]。

#### 利用 Composition API 实现更灵活的监听机制

对于更加复杂的业务需求或者是希望获得更好的代码组织形式，则推荐使用 composition-api 方式的 `watch` 功能。这种方式允许开发者创建可重用的逻辑片段并将其应用于多个地方。

import { defineComponent, onMounted, watch } from 'vue';
import { useStore } from 'vuex';

export default defineComponent({
  name: 'MyComponent',
  setup() {
    const store = useStore();

    // 直接监听整个state对象或其中某个属性
    watch(
      () => store.state.someState,
      (newValue, oldValue) => {
        console.log(`Value changed from ${oldValue} to ${newValue}`);
      }
    );

    return {};
  }
});

上述例子展示了如何借助箭头函数获取最新的 store 状态值来进行比较操作。此外还可以选择只接收新值作为参数传递给回调函数，这取决于具体的应用场景和个人偏好[^2]。

值得注意的是，如果要监控的对象是一个深层次嵌套结构的话，可能还需要考虑深拷贝等问题以确保能正确捕捉到所有的变动情况。