7.Vue_____keep-alive（结合路由）

Posted 2020-12-08 taozhibin

1、keep-alive这个内置组件，因为会把数据保存到内存中，所以不会销毁组件也不会重新渲染组件
通过路由切换组件得话组件是不会被从新销毁和渲染得

2、因为本身keep-alive可以实现缓存
告诉keep-alive要缓存那个组件中得数据
属性值得值都是正则表达式（匹配得组件数据才会缓存）或字符串（只缓存当前组件中得数据）
include：需要缓存谁
exclude：不缓存谁

3、当使用keep-alive得时候，因为组件是被存放在内存中的，所以不会触发created钩子函数，也就意味着不能再这个钩子函数中获取数据等得一系列操作
这个时候可以使用keep-alive得钩子函数来实现，activated(是再进入这个组件时触发得)和deactivated（是再离开这个组件时触发得）

例：

//父亲
<template>
  <div id=‘app‘>
      <div>
          <router-link to="/">Home</router-link>
           <router-link to="/about">about</router-link>
      </div>
      <keep-alive include="Home">
        <router-view></router-view>
      </keep-alive>
  </div>
</template>

<script>

export default {
  name: ‘App‘,

}
</script>

 //home组件

<template>
    <div>
        我是home
        <input type="text">
    </div>
</template>

<script>
export default {
    name:‘Home‘,
     beforeDestroy () {
         console.log("home 销毁")
     },
       activated () {
          console.log("你来了") 
     },
     deactivated () {
       console.log("nizoule1")
     }
}
</script>

//about组件

<template>
    <div>
        我是abuot
         <input type="text">
    </div>
</template>

<script>

export default {
    name:‘About‘,
      beforeDestroy () {
         console.log("about销毁")
     }
}
</script>