Vue 接收到一个组件，该组件被制成响应式对象

Question

我需要解决的问题：我正在写一个基于VueJS3的小vue-app。

我有很多不同的侧边栏，我需要防止同时打开多个侧边栏的情况。

为了存档此内容，我正在关注这篇文章。

现在我遇到了一个问题：

Vue 接收到一个 Component，该 Component 被设为响应式对象。这可能会导致不必要的性能开销，应通过用

markRaw

标记组件或使用

shallowRef

代替

ref

来避免。 (6)

这是我的代码：

SlideOvers.vue

<template>
    <component :is="component" :component="component" v-if="open"/>
</template>
<script>

export default {
    name: 'SlideOvers',
    computed: {
        component() {
            return this.$store.state.slideovers.sidebarComponent
        },
        open () {
            return this.$store.state.slideovers.sidebarOpen
        },
    },
}
</script>

UserSlideOver.vue

<template>
    <div>test</div>
</template>
<script>

export default {
    name: 'UserSlideOver',
    components: {},
    computed: {
        open () {
            return this.$store.state.slideovers.sidebarOpen
        },
        component () {
            return this.$store.state.slideovers.sidebarComponent
        }
    },
}
</script>

slideovers.js

（vuex 商店）

import * as types from '../mutation-types'

const state = {
    sidebarOpen: false,
    sidebarComponent: null
}

const getters = {
    sidebarOpen: state => state.sidebarOpen,
    sidebarComponent: state => state.sidebarComponent
}

const actions = {
    toggleSidebar ({commit, state}, component) {
        commit (types.TOGGLE_SIDEBAR)
        commit (types.SET_SIDEBAR_COMPONENT, component)
    },
    closeSidebar ({commit, state}, component) {
        commit (types.CLOSE_SIDEBAR)
        commit (types.SET_SIDEBAR_COMPONENT, component)
    }
}

const mutations = {
    [types.TOGGLE_SIDEBAR] (state) {
        state.sidebarOpen = !state.sidebarOpen
    },

    [types.CLOSE_SIDEBAR] (state) {
        state.sidebarOpen = false
    },

    [types.SET_SIDEBAR_COMPONENT] (state, component) {
        state.sidebarComponent = component
    }
}

export default {
    state,
    getters,
    actions,
    mutations
}

App.vue

<template>
    <SlideOvers/>
    <router-view ref="routerView"/>
</template>

<script>
import SlideOvers from "./SlideOvers";

export default {
    name: 'app',
    components: {SlideOvers},
};
</script>

这就是我尝试切换一个幻灯片的方法：

<template>
  <router-link
      v-slot="{ href, navigate }"
      to="/">
    <a :href="href"
       @click="$store.dispatch ('toggleSidebar', userslideover)">
        Test
    </a>
  </router-link>
</template>
<script>
import {defineAsyncComponent} from "vue";

export default {
  components: {
  },
  data() {
    return {
      userslideover: defineAsyncComponent(() =>
          import('../../UserSlideOver')
      ),
    };
  },
};
</script>

Answer 1

按照警告的建议，对 markRaw

 的值使用 

usersslideover 来解决警告：

export default {
  data() {
    return {
      userslideover: markRaw(defineAsyncComponent(() => import('../../UserSlideOver.vue') )),
    }
  }
}

演示

Answer 2

您可以使用 Object.freeze 来消除警告。 如果您只使用shallowRef f.e.，该组件只会被挂载一次，并且不能在动态组件中使用。

<script setup>
import InputField from "src/core/components/InputField.vue";

const inputField = Object.freeze(InputField);

const reactiveComponent = ref(undefined);

setTimeout(function() => {
  reactiveComponent.value = inputField;
}, 5000);

setTimeout(function() => {
  reactiveComponent.value = undefined;
}, 5000);

setTimeout(function() => {
  reactiveComponent.value = inputField;
}, 5000);
</script>

<template>
  <component :is="reactiveComponent" />
</template>