Vue生命周期

beforeCreate

created

beforeMount

mounted

beforeUpdate

updated

beforeDestory

destoryed


1. 在beforeCreate和created钩子函数之间的生命周期

在这个生命周期之间,进行初始化事件,进行数据的观测,可以看到在created的时候数据已经和data属性进行绑定(放在data中的属性当值发生改变的同时,视图也会改变)。

注意看下:此时还是没有el选项

2. created钩子函数和beforeMount间的生命周期

在这一阶段发生的事情还是比较多的。

首先会判断对象是否有el选项如果有的话就继续向下编译,如果没有el选项,则停止编译,也就意味着停止了生命周期,直到在该vue实例上调用vm.$mount(el)。

此时注释掉el

created停止


template参数选项的有无对生命周期的影响。

(1).如果vue实例对象中有template参数选项,则将其作为模板编译成render函数。

(2).如果没有template选项,则将外部HTML作为模板编译。

(3).可以看到template中的模板优先级要高于outer HTML的优先级。

render函数选项 > template选项 > outer HTML.

3. beforeMount和mounted 钩子函数间的生命周期

此时是给vue实例对象添加$el成员,并且替换掉挂在的DOM元素。

4. mounted


在mounted之前h1中还是通过{{message}}进行占位的,因为此时还有挂在到页面上,还是JavaScript中的虚拟DOM形式存在的。在mounted之后可以看到h1中的内容发生了变化。

5. beforeUpdate钩子函数和updated钩子函数间的生命周期

当vue发现data中的数据发生了改变,会触发对应组件的重新渲染,先后调用beforeUpdate和updated钩子函数。



6.beforeDestroy和destroyed钩子函数间的生命周期

beforeDestroy钩子函数在实例销毁之前调用。在这一步,实例仍然完全可用。

destroyed钩子函数在Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。


引用:https://segmentfault.com/a/1190000011381906

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 涉及到钩子函数有:1)beforeCreate;2)created;3)beforeMount;4)mounted...
    puxiaotaoc阅读 14,351评论 1 10
  • 参照翻译 Understanding Vue.js Lifecycle Hooks 理解组件的生命周期,有利于我们...
    bacbcc94613b阅读 10,472评论 0 6
  • Vue官方生命周期图每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将...
    ChangLau阅读 1,469评论 0 0
  • 先上图 遇到的一个问题 在我的项目中,常用的生命周期钩子函数一直都是mounted,对于大部分情况,都是屡试不爽、...
    任无名F阅读 41,818评论 10 50
  • vue生命周期简介 咱们从上图可以很明显的看出现在vue2.0都包括了哪些生命周期的函数了。 生命周期探究 对于执...
    余生LHX阅读 3,938评论 0 3