组件的生命周期

生命周期: 一个组件的加载过程
回顾: 网页加载过程: 也有生命周期
先加载HTML和JS，当HTML和JS加载完成后，提前触发DOMContentLoaded事件，
所以，我们可以在DOMContentLoaded中编写发送ajax请求的代码。这样，只要页面加载到这个阶段，事件触发，就会自动向服务器发送请求。
然后，当所有网页内容加载完，还会触发一个事件: window.onload。凡是写在window.onload事件中的代码，都会在整个页面加载完自动触发执行。
 问题：组件不是页面，无法触发页面的加载完成事件，但是，我们也想在组件加载完自动发送ajax请求！
 解决: 其实组件加载过程，也有生命周期的阶段，每个阶段也能自动触发一个回调函数。但是因为这个回调函数不是网页标准的事件，所以这种特殊的回调函数，称为生命周期中的钩子函数

Vue组件加载过程共分四个阶段，每个阶段前后，都会自动触发一个钩子函数。

 

 

共8个钩子函数:

  • beforeCreate(){}

　　　　创建(create)阶段: 创建vue对象，并创建vue中的data对象(只有data对象才能更新页面,只要是data创建完都可以写axios)

  • created(){ }//data有赋值
  • beforeMount(){}//html页面中data没赋值

　　　　挂载(mount)阶段: 扫描网页内容，建立虚拟DOM树，并首次更新页面中的内容

  • mounted(){ }//html中data有值

 

  •  beforeUpdate(){ }//运行该函数时，data为最新的，但是页面没更新

　　　　更新(update)阶段: 当组件的data中的变量被修改时，自动触发该阶段

  • updated(){ }
  • beforeDestroy(){ }

　　　　 销毁(destroy)阶段: 主动调用专门的函数销毁一个组件时才自动触发该阶段

  • destroyed(){ }

父组件和子组件生命周期函数的执行顺序:

父组件beforeCreate()
父组件created()
父组件 beforeMount()
父组件扫描页面内容时，发现不认识的子组件标签，开始进入子组件的加载过程
子组件beforeCreate()
子组件created()
子组件 beforeMount()
子附件 mounted()
父组件才继续先后扫描后续内容
父组件的mounted()