keep-alive缓存组件

1、内置组件keep-alive

有时候我们不希望组件被重新渲染影响使用体验；
或者处于性能考虑，避免多次重复渲染降低性能。
而是希望组件可以缓存下来,维持当前的状态。这时候就需要用到keep-alive组件。

2、开启keep-alive 生命周期的变化

初次进入时： onMounted> onActivated
退出后触发 deactivated
再次进入：只会触发 onActivated
事件挂载的方法等，只执行一次的放在 onMounted中；
组件每次进去执行的方法放在 onActivated中。

<!-- 基本 -->
<keep-alive>
  <component :is="view"></component>
</keep-alive>
<!-- 多个条件判断的子组件 -->
<keep-alive>
  <comp-a v-if="a > 1"></comp-a>
  <comp-b v-else></comp-b>
</keep-alive>
<!-- 和 `<transition>` 一起使用 -->
<transition>
  <keep-alive>
    <component :is="view"></component>
  </keep-alive>
</transition>

3、include 和 exclude

include 和 exclude prop 允许组件有条件地缓存。
二者都可以用逗号分隔字符串、正则表达式或一个数组来表示。

 <keep-alive :include="" :exclude="" :max=""></keep-alive>

4、max

<keep-alive :max="10">
  <component :is="view"></component>
</keep-alive>

Login.vue

<template>
  <div>
    <table>
      <tr>
        <td>账号</td>
        <td>
          <input v-model="loginForm.username" type="text" />
        </td>
      </tr>
        <tr>
        <td>密码</td>
        <td> 
          <input v-model="loginForm.password" type="password" />
        </td>
      </tr>
    </table>
    <button @click="submit">登录</button>
  </div>
</template>
<script setup lang="ts">
import { ref,reactive } from 'vue';
const loginForm = reactive({
  username:'',
  psd:'',
})
const submit = ()=>{
  console.log('登录')
}
</script>

Register.vue

<template>
  <div>
    <table>
      <tr>
        <td>账号</td>
        <td>
          <input v-model="loginForm.username" type="text"/>
        </td>
      </tr>
        <tr>
        <td>密码</td>
        <td>
          <input v-model="loginForm.password" type="password"/>
        </td>
      </tr>
           <tr>
        <td>验证码</td>
        <td>
          <input v-model="loginForm.code" type="text"/>
        </td>
      </tr>
    </table>
    <button @click="submit">注册</button>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue';
const loginForm = reactive({
  username:'',
  psd:'',
  code:""
})
const submit = ()=>{
  console.log('注册')
}
</script>

App.vue

<script setup lang="ts">
import { ref } from 'vue'
import Login from './components/login/Login.vue'
import Register from './components/register/Register.vue'
const flag = ref(false)
const switchCom = ()=>{
  flag.value = !flag.value
}
</script>
<template>
<div>
  <button @click="switchCom">切换</button>
  <keep-alive>
     <Login v-if="flag"></Login>
      <Register v-else></Register>
  </keep-alive>
</div>
</template>