生命周期指的是一个组件创建到销毁的整个过程

生命周期函数(钩子函数)

vue 框架内置函数，随着组件的生命周期，自动 按次序 执行

 作用：特定的时间点，执行某些特定的操作

四个阶段:

  初始化 => 创建组件   => beforeCreate created
  挂载 => 渲染显示组件 =>  beforeMount mouted
  更新 => 修改了变量 => 触发视图刷新 => beforeUpdate updated
  销毁 => 切换页面 => 会把组件对象从内存删除 => beforeDestory destoryed

下图展示了实例的生命周期。

父子组件同时有钩子函数的执行顺序:

初始化-->挂载-->更新-->销毁

父组件beforeCreate --- 实例初始化前
父组件created ---  实例初始化后
父组件beforeMount --- vue的虚拟DOM, 挂载到真实的网页之前
子组件beforeCreate --- 实例初始化前
子组件created ---  实例初始化后
子组件beforeMount --- vue的虚拟DOM, 挂载到真实的网页之前
子组件mounted --- vue的虚拟DOM, 挂载到真实的网页上
父组件mounted --- vue的虚拟DOM, 挂载到真实的网页上
子组件beforeUpdate --- 数据更新, 页面更新前
子组件updated --- 数据更新, 页面更新后
父组件beforeUpdate --- 数据更新, 页面更新前
子组件beforeDestroy --- 实例销毁之前调用
子组件destroyed --- 销毁完成
父组件updated --- 数据更新, 页面更新后

总结:

 1.初始化时父组件会先执行,然后会执行父组件挂载(前)才执行子组件初始化和挂载,最后才执行父组件的挂载(后)
 2.更新时子组件先更新,然后父组件会只执行更新(前)
 3.销毁子组件时父组件才会执行更新(后)

当你使用 keep-alive 时它会让被缓存的组件多出俩个钩子函数

1.激活 activated
2.失活 deactivated