keep-alive组件

组件切换会导致频繁的销毁和重新创建 , 在大多时候销毁和创建是存在自己的意义的 , 但也可能会导致性能的浪费 .

所以可以利用 keep-alive 组件将组件包裹保存在内存中不被销毁 .

格式为:

<template>
    <keep-alive>
        <!-- vue内置的组件component, 可以动态显示组件 -->
        <component :is="comName"></component>
    </keep-alive>
</template>

< keep-alive > 标签内部可以设置设置include属性 , 用来指定被缓存组件的名字 , 具体的以component中指定的为准 .

component是vue的内置组件 , 设置动态属性 is 切换组件名达到不同组件交替效果.

可以设置事件函数改变comName的值 .

具体操作有.

1.将子组件引入父组件 , 并注册

 import  UserName from "./components/UserName.vue"
 import  UserInfo from "./components/UserInfo.vue"
 import  UserProfile from "./components/UserProfile.vue"
 
 export  default {
     components:{   //注册组件
         UserName,
         UserInfo,
         UserProfile
     }
 }

2.添加按钮设置点击事件 , 声明变量

<template>
    <div>
        <button @click="comName = 'UserName'">用户名</button>
        <button @click="comName = 'UserInfo'" >用户注册</button>
        <button @click="comName = 'UserProfile'" >个人信息</button>
    </div>
</template>

<script>
export  defaule {
    data(){
        comName : 'UserName'
    }
}

</script>

3.用include指定组件的名

    <keep-alive :include="['UserName','UserInfo', 'UserProfile']"> //在标签内部添加组件名称
        <component :is="comName"></component>
    </keep-alive>

4.点击按钮 ,comName的值将会发生改变 , keep-alive中包裹的component 指定的值将会发生改变

在页面中就会根据不同的组件渲染出不同组件的内容.

这是keep-alive的基本使用 , 还可以利用template设置条件,插入其他组件等等一些操作 , 所为操作只是将各个独立的功能组合在一起 , 能达到什么效果取决于排列组合的运用 , 多多思考多多实践总会有收获 .