components简介
在不同组件之间进行动态切换
Vue的
内置组件keep-alive
keep-alive 动态组件默认每次切换都会销毁组件并重新创建,这样会影像性能
使用keep-alive组件缓存非活动组件,可以保留状态,避免重新渲染
<!-- 使用keep-alive组件缓存非活动组件,可以保留状态,避免重新渲染,默认每次切换都会销毁然后重新创建 -->
<keep-alive>
<component :is='flag'></component>
</keep-alive>
什么是动态组件?
组件是可复用的Vue实例,组件也是Vue实例
但组件和Vue实例存在差别:
- 组件没有挂在目标el
- 组件是跟随Vue实例的,所有的Vue实例的挂载点也是组件的挂载点
- 组件中data不能是对象,因为Vue实例是单例模式,只有一个
组件有多个,多个属性调用对象会指向同一地址,但是方法每new一个实例
就会开辟一块新的内存空间
所以组件中的data不能是对象,必须是方法 ★★★
动态组件就是动态变化的组件和动态样式一样
动态样式绑定 -> [:style]
动态组件绑定 -> [:is]
动态组件的具体实现
<template>
<div style="display: flex">
<div v-for="(item, index) in data" :key="index"
@click="switchCom(item, index)"
:class="[active === index ? 'active' : '']"
class="tabs"
>
<div>{{item.name}}</div>
</div>
<component :is="comId"></component>
</div>
</template>
<script setup>
import {ref, reactive, shallowRef, markRaw} from "vue";
import ACom from './components/A.vue'
import BCom from './components/B.vue'
import CCom from './components/C.vue'
const comId = shallowRef(ACom)
const active = ref(0)
const switchCom = (item, index) => {
comId.value = item.com
active.value = index
}
// markRaw:作用:标记一个对象,使其永远不会再成为响应式对象。
const data = reactive([
{
name: 'A',
com: markRaw(ACom)
},
{
name: 'B',
com: markRaw(BCom)
},
{
name: 'C',
com: markRaw(CCom)
}
])
</script>
<style lang="scss">
.active {
background: blueviolet;
}
.tabs {
border: 1px solid #ccc;
padding: 5px 10px;
margin: 5px;
cursor: pointer;
}
</style>
标签:Vue,markRaw,实例,组件,动态,com
From: https://www.cnblogs.com/openmind-ink/p/18029245