生命周期

生命周期钩子函数：Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数（生命周期!==生命周期钩子函数）

不要在选项属性或者回调函数上使用箭头函数

vue的生命周期：vue实例从创建到销毁：

生命周期钩子 类型 描述
beforeCreate function 实例初始化之后，数据观测event/watcher事件配置之前被调；挂载元素$el和数据对象data是undefined，未初始化，
created function 在实例创建完成后被立即调用，此时，实例已经完成以下配置：
数据观测，属性和方法的运算，watch/event事件回调。但是挂载阶段没有开始，$el属性目前看不见
beforeMount function 在挂载开始之前被调用：相关的render函数首次被调用（创建虚拟dom，不是真实的dom，是js对象其中包含了渲染成dom元素信息）
mounted function 把vue的虚拟dom挂载到真实的dom上，在vue中获取的dom元素对象，一般在此钩子中获取，项目中的ajax请求一般也在这里或者created处发送（el 被新创建的 vm.$el 替换，并挂载到实例上去之，调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内）
beforeUpdated function 只有当数据发生变化时，会触发此函数（数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。）
updated fucntion 在虚拟dom重新渲染和打补丁（数据更改会导致的）之后才会调用updated，组成新的dom已经更新，避免在此钩子函数中操作数据，防止死循环
beforeDestroy function 在vue的实例被销毁之前调用，实例可以使用，this也可以获取实例，如果页面中有定时器，则可以在此钩子里清除定时器解绑事件（该钩子在服务器端渲染期间不被调用）
destroyed function vue实例销毁后调用，实例的属性也不再是响应式，watch被移除（该钩子在服务器端渲染期间不被调用）
activated function keep-alive组件激活时调用，他在服务器渲染期间不被调用
deactivated function keep-alive组件停用时调用，他在服务器端渲染期间不被调用
errorCaptured (err: Error, vm: Component, info: string) => ?boolean 当捕获一个来自子孙组件的错误时调用，此钩子会受到三个参数：错误对象，发生错误的组件实例以及一个包含错误来源信息的字符串，返回false阻止该错误继续向上传播
  1. mounted，updated不会将所有的子组件都一起被挂载，如果是整个视图都渲染完毕，可以用vm.$nextTick替换掉mounted，updated
  2. http请求建议在created生命周期内发出

keep-alive

vue的内置组件，包裹动态组件，缓存不活动的组件实例。与transition相似，keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。要求同时只有一个子元素被渲染。

作用

  1. 保存组件状态
  2. 避免dom重复渲染
  3. 减少加载时间和性能消耗

  4. 提高用户体验

    原理

    created函数调用时会将需要缓存的节点保存在this.cache中/在页面渲染时，如果虚拟dom的name符合条件（可以借助include和exclude控制），则会从this.cache中取出之前缓存的虚拟dom实例进行渲染。

  5. include：字符串或正则表达式。只有名称匹配的组件会被缓存可以用逗号分隔字符串、正则表达式或一个数组来表示

  6. exclude：字符串或正则表达式。任何名称匹配的组件都不会被缓存可以用逗号分隔字符串、正则表达式或一个数组来表示
  7. max: 数字，最多可以缓存多少组件实例

    被包含在 keep-alive 中创建的组件，会多出两个生命周期的钩子: activated 与 deactivated 使用 keep-alive 会将数据保留在内存中，如果要在每次进入页面的时候获取最新的数据，需要在 activated 阶段获取数据，承担原来 created 钩子函数中获取数据的任务。 注意： 只有组件被 keep-alive 包裹时，这两个生命周期函数才会被调用，如果作为正常组件使用，是不会被调用的，以及在 2.1.0 版本之后，使用 exclude 排除之后，就算被包裹在 keep-alive 中，这两个钩子函数依然不会被调用！另外，在服务端渲染时，此钩子函数也不会被调用
    include和exclude匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。不会在函数式组件中正常工作，因为它们没有缓存实例。

原文：https://www.kancloud.cn/hanxuming/vue-iq/733837

1. 缓存所有页面

在app.vue页面

  1. <template>
  2.   <div id="app">
  3.       <keep-alive>
  4.       <router-view/>
  5.     </keep-alive>
  6.   </div>
  7. </template>
  9. <script>
  10. export default {
  11.   name: 'App'
  12. }
  13. </script>

根据条件缓存

在app.vue里面

  1. <template>
  2.   <div id="app">
  3.       // 1. 将缓存 name 为 test 的组件
  4.       <keep-alive include='test'>
  5.       <router-view/>
  6.     </keep-alive>
  8.     // 2. 将缓存 name 为 a 或者 b 的组件，结合动态组件使用
  9.     <keep-alive include='a,b'>
  10.         <router-view/>
  11.     </keep-alive>
  13.     // 3. 使用正则表达式，需使用 v-bind
  14.     <keep-alive :include='/a|b/'>
  15.         <router-view/>
  16.     </keep-alive>    
  18.     // 5.动态判断
  19.     <keep-alive :include='includedComponents'>
  20.         <router-view/>
  21.     </keep-alive>
  23.     // 5. 将不缓存 name 为 test 的组件
  24.     <keep-alive exclude='test'>
  25.         <router-view/>
  26.     </keep-alive>
  27.   </div>
  28. </template>
  31. //6. 
  32. <script>
  33. export default {
  34.   name: 'App'
  35. }
  36. </script>

结合Router，缓存部分页面

  1. 在 router 目录下的 index.js 文件里
  1. import Vue from 'vue'
  2. import Router from 'vue-router'
  3. const Home = resolve => require(['@/components/home/home'], resolve)
  4. const Goods = resolve => require(['@/components/home/goods'], resolve)
  5. const Ratings = resolve => require(['@/components/home/ratings'], resolve)
  7. Vue.use(Router)
  9. export default new Router({
  10.   mode: 'history',
  11.   routes: [
  12.     {
  13.       path: '/',
  14.       name: 'home',
  15.       component: Home,
  16.       redirect: 'goods',
  17.       children: [
  18.         {
  19.           path: 'goods',
  20.           name: 'goods',
  21.           component: Goods,
  22.           meta: {
  23.             keepAlive: false // 不缓存
  24.             }
  25.         },
  26.         {
  27.           path: 'ratings',
  28.           name: 'ratings',
  29.           component: Ratings,
  30.           meta: {
  31.             keepAlive: true  // 存
  32.             }
  33.         }
  34.       ]
  35.     }
  36.   ]
  37. })
  1. App.vue 里面
  1. <template>
  2.   <div id="app">
  3.       <keep-alive>
  4.       <router-view v-if="$route.meta.keepAlive"></router-view>
  5.     </keep-alive>
  6.     <router-view v-if="!$route.meta.keepAlive"></router-view>
  7.   </div>
  8. </template>
  10. <script>
  11. export default {
  12.   name: 'App'
  13. }
  14. </script>

原文链接：https://blog.csdn.net/fu983531588/article/details/90321827

生命周期图

2. 生命周期 - 图1