渲染列表 (七) -优化-缓存组件—返回网页原位置-keep-alive缓存组件-包裹动态组件-按需缓存单独配置-meta { keepAlive true } & activated 激活组件触发

优化-缓存组件—返回网页原位置-keep-alive 缓存组件-将其动态组件包裹起来-按需缓存，单独配置——meta: { keepAlive: true } & activated 激活组件触发

keep-alive 缓存组件：

https://cn.vuejs.org/v2/guide/components-dynamic-async.html#在动态组件上使用-keep-alive

重新创建动态组件的行为通常是非常有用的，我们更希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来。为了解决这个问题，我们可以用一个 <keep-alive> 元素将其动态组件包裹起来。

• keep-alive 缓存组件
  • 我们可以用一个 <keep-alive> 元素将其动态组件包裹起来。
  • router-view 通过路由指定组件，动态的切换。
• 并非所有组件要做缓存，所以按需缓存。
  • 缓存需要占用内存，容易造成内存溢出。
  • 思路：判断当前路由对应的组件是否需要缓存，如果需要使用 <keep-alive> 包裹。
• 组件被缓存之后，再次激活的时候，created不会执行，activated 激活组件触发，deactivated 离开组件触发。
  • vue生命周期activated：https://cn.vuejs.org/v2/api/#activated

src/router.js

const router = new Router({
  routes: [
    { path: '/search', name: 'serach', component: Search },
    { path: '/search/result', name: 'serach-result', component: SearchResult },
    { path: '/user/profile', name: 'user-profile', component: UserProfile },
    { path: '/user/chat', name: 'user-chat', component: UserChat },
    { path: '/login', name: 'login', component: UserLogin },
-   { path: '/article/:id', name: 'article', component: Article}  
// meta 用来存储信息  按需缓存，单独配置——meta: { keepAlive: true } 
+   { path: '/article/:id', name: 'article', component: Article, meta: { keepAlive: true } },
    {
      path: '/',
      component: Layout,
      children: [
-        { path: '/', name: 'home', component: Home }
+        { path: '/', name: 'home', component: Home, meta: { keepAlive: true } },
        { path: '/question', name: 'question', component: Question },
        { path: '/media', name: 'media', component: Media },
        { path: '/user', name: 'user', component: User }
      ]
    }
  ]
})

src/App.vue

<div id="app">
  <keep-alive>
      //一级路由组件包裹
    <router-view v-if="$route.meta.keepAlive"></router-view>
  </keep-alive>
  <router-view v-if="!$route.meta.keepAlive"></router-view>
</div>

src/views/Layout.vue

<div id="app">
  <keep-alive>
      //二级路由组件包裹   $route：获取路由信息  判断是否有路由信息决定使用什么组件
    <router-view v-if="$route.meta.keepAlive"></router-view>
  </keep-alive>
  <router-view v-if="!$route.meta.keepAlive"></router-view>
</div>