咱们现在Web项目变得越来越麻烦了，所以前端优化就更加关键。Vue框架里头有些小技巧能让组件性能升级，比如那个keep-alive特别好用！今儿说一下这个keep-alive咋样使Vue组件跑得快又节约资源的，包括怎么让那些要保持活动状态的组件进行“打包”，怎么用hook控制状态存储和清除，还能用includes和excludes控制哪些组件进行缓存哈。

1.使用keep-alive包裹需要缓存的组件

啊你只要找到那个叫”Keep-Alive”的地方，然后把那些不用每次开机都要重载的东西扔进去，比如说这个叫“Dashboard”的玩意儿。就在那个标签那儿扔进去就行！

html

别担心用”仪表盘”，你跳转了网页以后再回来，选的那啥设置啥的都还在。这么弄，咱们换页面可真快，感觉也好极了！

通过启用和禁用钩子函数，搞定状态存储与清空

在玩儿转keep-alive缓存开关时，Vue给你提供了两个好用的钩子，名叫 activated 和 deactivated。这两个家伙可牛逼了，你可以随心所欲地使用它们。比如说，如果你想要给”Dashboard”这货加点儿料，增强它的效果，那就试试看这么做吧：

“`javascript

export default {

  

    
      
    
    Toggle Dashboard
  


import Dashboard from './Dashboard.vue';
export default {
  components: {
    Dashboard
  },
  data() {
    return {
      showDashboard: true
    };
  },
  methods: {
    toggleDashboard() {
      this.showDashboard = !this.showDashboard;
    }
  }
};

activated(){

//在每次激活时执行的逻辑

标题就叫”激活仪表板”。

},

deactivated(){

//在每次停用时执行的逻辑

}

}

在这个挂钩函数里头，咱们想让数据更新还是删除或者到底啥时该咋样，都随心所欲得很！这下子，组件状态变化就尽在掌握之中

  

    
{{ title }}
    Increment
  


export default {
  data() {
    return {
      title: 'Dashboard',
      count: 0
    };
  },
  activated() {
    this.title = 'Activated Dashboard';
  },
  deactivated() {
    this.title = 'Dashboard';
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};

3.使用include和exclude属性指定缓存的组件

有时候只想保留几个零件或者剔除某些不想保存的零件，这时候就可以用到Vue的include和exclude属性！比如说，我们只要保留”dashbaord”这一个零件，其他的都不用管了:

把Vue里的include属性设为[‘dashboard’]，那就能堆栈’仪表盘’组件了；其他的，就没这福气喽！所以，要想谁有缓存功能，就让它有；不想让谁有，也行。

4. keep-alive与路由结合使用

咱们做项目时，常常用到 Vue Router 和 keep-alive 来解决页面缓存问题。怎么用？简单，你只需要在路由设置中选择要缓存的页面或路由就行了，不论你跳转多少次页面，浏览器显示的都是你第一次浏览的那张图！

用VueRouter来创建个路由。就是这么简单！

routes:[

{

path:’/dashboard’,

component: Dashboard,

meta:{ keepAlive: true }

  

    
      
    
    
    Toggle Dashboard
    Toggle Settings
  


import Dashboard from './Dashboard.vue';
import Settings from './Settings.vue';
export default {
  components: {
    Dashboard,
    Settings
  },
  data() {
    return {
      showDashboard: true,
      showSettings: true
    };
  },
  methods: {
    toggleDashboard() {
      this.showDashboard = !this.showDashboard;
    },
    toggleSettings() {
      this.showSettings = !this.showSettings;
    }
  }
};

}

]

});

就跟上边讲过的那回事儿一样，咱们把’Dashboard’小白页的缓存设置在了’slashboard’那儿，无论是你按浏览器上一页还是直接点过去，你看到的’Dashboard’都是固定不变哒，不用担心走马观花。

5. keep-alive与动态组件配合

别看 Keep-Alive 就这么点功能，但是它对动态加载组件和有条件的渲染场景可是超级给力！是不是遇到 Tab 页签乱换，所有内容都要重新加载？有了它，这问题就直接out！

我们吧动画环节塞进了”保持活跃”里。就算你去别的标签页面，只要第一次刷新就行，以后就跟之前的一样！

总的来说，在Vue里面搞好keep-alive功能真的超级赞！简单着，学点什么包裹，钩子函数，设置属性这种东西，然后巧妙地把这些跟路由、动态渲染之类的配合起来，网页响应速度和用户体验立马就能有飞跃式的提高哦～。