vue的keep-alive

keep-alive是vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM；

keep-alive包裹动态组件的时候，会缓存不活动的组件实例，而不是销毁他们；

      <div> 
          <span @click="button1" style="padding: 0 25px;">buttonspan><span @click="button2">button1span>
      div>
      
      
      <keep-alive >
          <one-name v-if="status">one-name>
      keep-alive>

被keep-alive缓存的组件（当点击button按钮时  如果是被keep-alive缓存的组件则 "vue实例化" -> "dom渲染完毕"，如果没有被缓存，则会一直 "vue实例化" -> "dom渲染完毕"->"组件被销毁了"）

<template>
    <el-row>
        <div @click="okClick">第一个组件{{num1}}div>
    el-row>
template>

<script>
    export default {
        name: 'oneName',
        data() {
            return {
                num1: 0
            }
        },
        created () {
            console.log('vue实例化了')
        },
        mounted () {
            console.log('dom渲染完毕')
        },
        destroyed () {
            console.log('组件被销毁了')
        }
    }
script>

<style scoped>

style>