Vue - 组件生命周期

1,628 阅读2分钟

生命周期的定义

  组件在特定时候会触发一些函数,这些函数就是生命周期,组建的生命周期总共有三个阶段:

挂载:

初始化相关属性

  beforeCreate() - 组件创建之前

  在实例初始化之后,数据观测和事件配置之前被调用。

  created() - 组件已创建

  在实例创建完成后被立即调用。

  beforeMount() - 组件上树之前

  在挂载之前被调用。

  mounted() - 组件已上树

  被新创建的vm.$el替换,并挂载到实例上之后调用。

  这个函数一旦被触发,就意味着组建的初始化已完成,页面模板已形成,我们可以往模板中填充数据。这个函数最常被用到的应用场景为调用后台接口获取数据后用获得的数据填充模板。填充数据是必定在页面模板存在的情况下。

更新:

元素或组件的变更操作

  beforeUpdate() - 组建更新之前

  数据更新时调用,发生在虚拟DOM打补丁之前。

  updated() - 组件已更新

  由于数据更改导致的虚拟DOM重新渲染和打补丁,在这之后会调用此钩子。

销毁:

销毁相关属性

  beforeDestroy() - 组件消亡之前

  实例销毁之前调用。

  destroyed() - 组件已消亡

  实例销毁之后调用。

  我们一般常说的生命周期就是以上八个,但实际上有十个。

生命周期的具体表现

  组件的创建与上树

  如上图所示,所有的alert都点过确定之后组件才上树,也就是说这些生命周期函数都是先于组件程序一步执行的。

  组件的消亡

  代码同上,再看看组件消亡的过程:

  组件的更新

  组件自身data的变化以及父组件传入的props的变化都会触发组建更新相关的两个生命周期beforeUpdate( )updated( )

  因此,【注意】不要在这两个生命周期函数内写入改变自身data和父组件传入props的逻辑,否则程序将陷入死循环。