vue3，watch不去监听onMouted中的变化

在 Vue 3 中，watch 是通过 `watchEffect` 实现的，而 `watchEffect` 是在组件渲染期间执行的。因此，在 `onMounted` 中的变化不会被 `watchEffect` 监听到。

如果你需要在 `onMounted` 中监听变化，可以使用 `ref` 和 `watch`，如下所示：

import { ref, watch, onMounted } from 'vue';

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

    onMounted(() => {
      count.value = 1;
    });

    watch(count, (newValue, oldValue) => {
      console.log(`count changed from ${oldValue} to ${newValue}`);
    });

    return {
      count,
    };
  },
};

在上面的例子中，我们使用了 `ref` 创建了一个响应式数据 `count`，然后在 `onMounted` 中改变了 `count` 的值，最后使用 `watch` 监听 `count` 的变化。这样，当 `count` 的值发生改变时，就会执行回调函数，并输出变化前后的值。

相关问题

vue2 watch监听sessionstorage 监听不到变化啊

可以尝试使用第三方库vue-ls来监听sessionStorage的变化。首先需要安装vue-ls，然后在main.js中引入并配置。接着在需要监听的组件中使用watch监听sessionStorage的变化即可。

代码示例：

// 安装vue-ls
npm install vue-ls --save

// main.js中引入并配置
import Vue from 'vue'
import VueStorage from 'vue-ls'

Vue.use(VueStorage, {
  namespace: 'vuejs__', // key prefix
  name: 'ls', // name variable Vue.[ls] or this.[$ls],
  storage: 'session' // storage name session, local, memory
})

// 组件中使用watch监听sessionStorage的变化
export default {
  data() {
    return {
      role: this.$ls.get('role') // 初始化时获取sessionStorage中的值
    }
  },
  mounted() {
    // 监听sessionStorage的变化
    this.$watch('$ls.role', (val) => {
      this.role = val
    })
  }
}

vue3 watch不立即监听

在Vue 3中，使用`watch`函数时，默认情况下是立即执行监听的。即当被监听的响应式对象发生变化时，监听函数会立即执行。但是，如果你希望`watch`函数不立即执行监听，可以通过设置`{ immediate: false }`选项来实现。例如：

watch(() => a.value, (val) => {
  console.log(val, "change")
}, { immediate: false })

这样，当`a.value`发生变化时，监听函数就不会立即执行，而是等到下一次事件循环时才执行。这在某些情况下可以提高性能，避免频繁执行监听函数。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [Vue3-Watch踩坑-watch监听无效](https://blog.csdn.net/qq_40441489/article/details/128004872)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]