Vue3+Ionic未使用ref却出现组件响应式警告的原因

警告原因 #

你没直接用ref，但Vue会自动把data()返回的所有对象转为响应式。你把MorePageComponent组件实例放到了data返回的对象里，Vue就会把这个组件变成响应式对象——组件本身不需要响应式追踪，这种转换完全没必要，反而会造成额外性能开销，所以触发了这个警告。

解决方案 #

方案一：用setup返回组件（推荐）

Vue3的setup选项返回的普通值不会被自动转为响应式，直接在这里返回组件即可：

<template>
    <ion-page>
        <ion-nav :root="MorePageComponent"></ion-nav>
    </ion-page>
</template>

<script lang="ts">
import { IonNav, IonPage } from '@ionic/vue';
import MorePageComponent from "@/components/MorePageComponent.vue";

export default {
    components: {
        IonNav, IonPage
    },
    setup() {
        return {
            MorePageComponent
        }
    }
}
</script>

方案二：用markRaw标记组件（保留data的情况）

如果一定要用data选项，用Vue的markRaw方法标记组件，让Vue跳过响应式转换：

<template>
    <ion-page>
        <ion-nav :root="MorePageComponent"></ion-nav>
    </ion-page>
</template>

<script lang="ts">
import { IonNav, IonPage } from '@ionic/vue';
import { markRaw } from 'vue';
import MorePageComponent from "@/components/MorePageComponent.vue";

export default {
    components: {
        IonNav, IonPage
    },

    data() {
        return {
            MorePageComponent: markRaw(MorePageComponent)
        }
    }
}
</script>

内容的提问来源于stack exchange，提问作者Biskweet