vue生命周期

每个vue实例在被创建之前都要经过初始化。例如观测数据,初始化事件,挂载Dom,同时data变化时,更新Dom,在这一系列过程中有着一些钩子,在完成某些特定的条件时,便会触发,我们称它为钩子函数。一个实例从创建到销毁的过程则称之为实例的生命周期。

来看一张vue生命周期的图解


vue生命周期_第1张图片
生命周期图解

下面介绍一下vue的钩子函数:

  • beforeCreate
    beforeCreate发生在new Vue()之后,但在还没有观测数据之前调用
  • created
    在观测数据以及vue内部初始化事件后调用created钩子
  • beforeMount
    开始挂载钩子,但是还没有生成HTML到页面上,此时标签内任然是Mustach
  • mounted
    挂载完成,html渲染到页面上,此时可以用axios发送一些ajax请求
  • beforeUpdate
    在数据更新之前调用的钩子
  • updated
    数据更新之后调用,之后多次更新数据任然会调用此钩子
  • beforeDestroy
    vue实例销毁前执行
  • destroyed
    vue实例销毁后执行,此后vue的watcher,组件,以及时间都被卸载,不能使用,但是data任然存在

最后理一遍思路,先new Vue()创建一个实例,调用beforeCreate钩子,观测数据,初始化事件,调用created钩子,判断el是否存在,若不存在则等到vm.mount(el)被调用才继续往下执行,若存在,则继续判断template是否存在,若template存在,则把data和template结合,但是不放到页面上,若不存在则使用el的outerHTML作为html,接着调用beforeMount钩子,此时,页面上任然是大胡子语法的标签,把结合的html放到页面上,调用mounted钩子。当数据发生变化时,先调用beforeUpdate钩子,虚拟Dom渲染数据,然后调用updated钩子。最后当destroy()被调用时,先执行beforedestroy钩子,然后卸载组件,事件,watcher,再调用destroyed钩子,至此就是一个完整的vue生命周期。

下面是一个vue生命周期的例子




    
    


    

{{ message }}

本文参考链接:
vue官方文档
vue入门系列
知乎

你可能感兴趣的:(vue生命周期)