大佬教程收集整理的这篇文章主要介绍了Vue 收到一个组件，该组件是一个响应式对象，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我需要解决的问题：我正在写一个基于VueJs3的小vue-app。
我有很多不同的侧边栏，我需要防止同时打开多个侧边栏的情况。
要归档此内容，我正在关注 this article。
现在我遇到了一个问题：
Vue 收到了一个组件，它是一个响应式对象。这会导致不必要的性能开销，应该通过使用 @H_272_11@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>
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,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>
这就是我尝试切换一个幻灯片的方式：
@H_502_22@<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 的值使用 @H_272_11@markRaw 来解决警告：
export default {
data() {
return {
userslideover: markRaw(defineAsyncComponent(() => import('../../UserSlideOver.vue') )),}
}
}
demo
以上是大佬教程为你收集整理的Vue 收到一个组件，该组件是一个响应式对象全部内容，希望文章能够帮你解决Vue 收到一个组件，该组件是一个响应式对象所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。