[JavaScript知识库]Vue组件及路由缓存

vue组件及路由缓存

路由缓存

全部缓存

    <keep-alive>
      <router-view></router-view>
    </keep-alive>

app.vue根组件

<template>
  <div id="app">
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

路由

  {
    path: '/first',
    name: 'first',
    component: () => import('../views/alive.vue/first.vue')
  },
  {
    path: '/second',
    name: 'second',
    component: () => import('../views/alive.vue/second.vue')
  },
  {
    path: '/third',
    name: 'third',
    component: () => import('../views/alive.vue/third.vue')
  }

first.vue组件

<template>
  <div class="first">
    <h1 class="title">第一个组件</h1>
    <button @click="toSecond">跳到第二个组件</button>
  </div>
</template>
<script>
export default {
  name: 'first',
  methods: {
    toSecond() {
      document.querySelector('.title').style.color = 'red'
      this.$router.push('/second')
    }
  }
}
</script>

second.vue组件

<template>
  <div class="second">
    <h1>第二个组件</h1>
    <button @click="toThird">跳到第三个组件</button>
  </div>
</template>
<script>
export default {
  name: 'second',
  created() {
    console.log('second created')
  },
  methods: {
    toThird() {
      document.querySelector('.second').style.backgroundColor = 'green'
      this.$router.push('/third')
    }
  }
}
</script>

third.vue组件

<template>
  <div class="third">
    <h1>第三个组件</h1>
  </div>
</template>

如果我点击第一页的按钮，进入second页面，点击第二页的按钮，进入第三个页面;

然后返回second,第二个组件second.vue的背景色是绿色的

再返回first，第一个组件title的文字是红色的

所有的组件都被缓存了

部分（多个或一个）缓存

修改app.vue跟组件

    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>

修改路由，需要缓存的路由添加meta属性，且是否缓存keepAlive键的值设置为true

  {
    path: '/first',
    name: 'first',
    component: () => import('../views/alive.vue/first.vue'),
    meta: { keepAlive: true }
  },
  {
    path: '/second',
    name: 'second',
    component: () => import('../views/alive.vue/second.vue')
  },
  {
    path: '/third',
    name: 'third',
    component: () => import('../views/alive.vue/third.vue'),
    meta: { keepAlive: false }
  }

这样和上面一样点击跳转，再返回 first=》second=》third=》second=》first

返回的时候就只有第一个页面的字体是红色的，由缓存；第二个页面的背景是白色，没缓存

缓存单个路由

再keep-alive标签内设置inlude属性，属性值为需要被缓存的路由名称

    <keep-alive include="second">
      <router-view></router-view>
    </keep-alive>

组件缓存

直接再需要被缓存的组件外加一层keep-alive标签

    <keep-alive include="second">
      <test></test>
    </keep-alive>

被keep-alive包裹的组件，不会销毁，而是将需要缓存的虚拟dom（一个js对象）存在this.cache缓存中，如果渲染的name符合条件，那么虚拟dom就会从缓存中取出，重新渲染

所以被缓存的组件只在初始化的时候执行created,再次切换到那个组件是不会重新created的

v-show有一点相似，只是v-show是通过display来设置显示与隐藏

keep-alive的几个属性

• include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
• exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
• max - 数字。最多可以缓存多少组件实例
• 使用keep-alive的时候也要考虑下性能，不能缓存太多的东西