Vue组件(三)——keep-alive性能优化

keep-alive标签，是vue自带的标签。

很多时候页面是需要进行数据缓存的。在vue项目中，这个功能的应用极为简单，因为vue中已经定义好了keep-ailve标签，只需要在项目入口处，使用keep-alive标签包括项目即可。

例如，vue的项目入口都是App.vue组件（定义在main.js中），因此：

<template>
  <div id="app">
    <!-- keep-alive是vue自带标签。路由内容被加载后，即放入内存中，下次进入路由不需再次加载
    使用该组件后会多两个钩子函数：activated、deactivated。页面加载和卸载时执行 -->
    <!-- 除了Detail页面，其他都会被缓存。不过每次加载Detail都会再次ajax请求。
    exclude值的页面，不会使用组件keep-alive，因此activated和deactivated不会生效 -->
    <keep-alive exclude="Detail">
       <!-- rooterview表示的是当前路由地址所对应的内容
       路由地址定义在router/index.js中 -->
      <router-view/>
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>

</style>

 

keep-alive的钩子

activated：使用keep-alive标签时才会被激活。页面加载时执行，可以用于数据渲染。由于使用了keep-alive后，ajax的请求数据会被浏览器缓存，当需要数据重新渲染时（如去哪儿网城市不同，景点数据不同）也不会重新请求数据。这时，需要将ajax请求函数放在activated中即可。

deactivated：使用keep-alive标签时才会被激活。页面卸载时执行。