Vue는 반응성 물체로 만들어진 구성 요소를 받았다.

Vue는 반응성 물체로 만들어진 구성 요소를 받았다.

내가 해결해야 할 문제: 나는 VueJS3를 기반으로 약간의 Vue-app을 쓰고 있다.

여러 가지 사이드바를 받았는데, 사이드바를 두 개 이상 동시에 여는 경우를 막아야 해.

이것을 보관하기 위해 나는 이 기사를 따라가고 있다.

이제 문제가 생겼어

Vue는 반응성 물체로 만들어진 구성품을 받았다.이는 불필요한 성능 오버헤드로 이어질 수 있으며, 구성 요소를 다음 항목으로 표시하여 방지해야 한다.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-store)

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>

경고의 권장 사항에 따라 다음 값을 사용하십시오.usersslideover경고를 해결하려면:

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

데모를 하다

오브젝트를 사용할 수 있다.얼어서 경고를 없애다얕은 참조 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>

참조URL: https://stackoverflow.com/questions/68351937/vue-received-a-component-which-was-made-a-reactive-object