uni-app 4.08 vue3 setup 下 watch 跟 onMounted 的问题

开发环境	版本号	项目创建方式
Mac	mac os 14.3	CLI

操作步骤：

watch(  
    () => props.data,  
    n => {  
        if (n !== null) {  
            state.planData = n;  
            state.selectItem = n[1];  
            emits('change', n[1]);  
        }  
    },  
    {  
        immediate: true,  
    },  
);  

onMounted(() => {  
    if (!props.data) {  
        initData();  
    }  
});

预期结果：

onMounted 执行

实际结果：

不执行且报错

bug描述：

微信小程序端使用 watch && immediate = true 时且有 onMounted 时会报警告，onMounted 也不会执行，报错说 onMounted 在外部被调用了，我删除了 immediate 则正常执行，但是同样的代码我回退到 3.99，则无问题

phonegap100 1楼•11 天前

好像setup中不能使用onMounted了，前两天我也遇到了，我改成onReady就没事了，不知道啥原因，跟你这情况有点类似

phonegap100 2楼•11 天前

要是 vue 官方的改动倒无所谓，这个估计就是bug

h691938207 3楼•11 天前作者

在 uni-app 4.08 中使用 Vue 3 的 setup 语法时，watch 和 onMounted 是常用的组合式 API。以下是一些常见问题和注意事项：

1. `watch` 的使用

watch 用于监听响应式数据的变化，并在数据变化时执行相应的回调函数。

import { ref, watch } from 'vue';

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

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

    return {
      count
    };
  }
};

2. `onMounted` 的使用

onMounted 是生命周期钩子，用于在组件挂载到 DOM 后执行某些操作。

import { onMounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('Component is mounted');
    });

    return {};
  }
};

3. `watch` 和 `onMounted` 的组合使用

有时你可能需要在组件挂载后开始监听某些数据的变化。可以在 onMounted 中设置 watch。

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

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

    onMounted(() => {
      console.log('Component is mounted, starting to watch count');

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

    return {
      count
    };
  }
};

4. 注意事项

watch 的立即执行：如果你希望在 watch 被创建时立即执行回调函数，可以使用 { immediate: true } 选项。

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

watch 的清理：如果你在 watch 中执行了一些异步操作，确保在组件卸载时清理这些操作，以避免内存泄漏。可以使用 onUnmounted 钩子。

import { onUnmounted } from 'vue';

onUnmounted(() => {
  console.log('Component is unmounted, cleaning up watch');
});

watch 的深度监听：如果你需要监听对象或数组的内部变化，可以使用 { deep: true } 选项。

const state = ref({ count: 0 });

watch(state, (newValue, oldValue) => {
  console.log('state changed', newValue);
}, { deep: true });

5. 常见问题

watch 未触发：确保你监听的是响应式数据（如 ref 或 reactive 创建的数据），并且数据确实发生了变化。
onMounted 中的异步操作：如果你在 onMounted 中执行异步操作，确保处理可能的竞态条件。

6. 示例代码

以下是一个完整的示例，展示了如何在 uni-app 中使用 Vue 3 的 setup 语法结合 watch 和 onMounted：

<template>
  <view>
    <text>Count: {{ count }}</text>
    <button @click="increment">Increment</button>
  </view>
</template>

<script>
import { ref, watch, onMounted } from 'vue';

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

    onMounted(() => {
      console.log('Component is mounted, starting to watch count');

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

    const increment = () => {
      count.value++;
    };

    return {
      count,
      increment
    };
  }
};
</script>