Vue生命周期钩子

353 阅读1分钟

1、生命周期钩子

  • vue生命周期钩子:vue实例从加载到销毁过程中会执行的一些回调函数
  • 生命周期:vue实例从创建到销毁的过程。(vue实例创建,dom树完成渲染)
  • 钩子:回调函数

注意:不要在选项 property 或回调上使用箭头函数,因为箭头函数并没有 thisthis会作为变量一直向上级词法作用域查找,直至找到为止,经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError:this.myMethod is not a function之类的错误。

2、vue生命周期4个阶段8个钩子

阶段一:创建 ( 创建vue实例)

  • beforeCreate(), created()

阶段二:挂载 (data数据渲染到el)

  • beforeMount(),mounted()

阶段三:更新 (检测data变化并更新el)

  • beforeUpdate(), updated()

阶段四:销毁(解除data与el的绑定关系)

  • beforeDestroy() , destroyed() 附图一张(做了好久~~ ~)

前端刘傲波纵向图解.jpg

3. vue第一次加载的时候会执行哪几个钩子

1、创建vue实例之前

  • beforeCreate()

2、创建vue实例之后:

  • created()

3、挂载前:

  • beforeMount()

4、挂载后(初始渲染) :

  • mounted()

4. vue常用钩子

  • created :完成data数据创建(一般用于axios请求网络数据)
  • mounted :完成初始渲染(一般用于操作dom)

5.后记

如果发现内有语句或逻辑混乱的地方,还请各路大神指正。 image.png