vue生命周期函数

beforeCreate

第一个生命周期函数,表示实例完全被创建出来之前,会执行它
注意: 在 beforeCreate 生命周期函数执行的时候,data 和 methods 中的 属性与方法定义都还没有没初始化

created

第二个生命周期函数,在 created 中,data 和 methods 都已经被初始化好了! 如果要调用 methods 中的方法,或者操作 data 中的数据,最早,只能在 created 中操作

beforeMount

第三个生命周期函数,表示 模板已经在内存中编辑完成了,但是尚未把 模板渲染到 页面中。
在 beforeMount 执行的时候,页面中的元素,还没有被真正替换过来,只是之前写的一些模板字符串

mounted

第四个生命周期函数,表示,内存中的模板,已经真实的挂载到了页面中,用户已经可以看到渲染好的页面了
注意: mounted 是 实例创建期间的最后一个生命周期函数,当执行完 ##mounted 就表示,实例已经被完全创建好了,此时,如果没有其它操作的话,这个实例,就静静的 躺在我们的内存中,一动不动
此时,表示vue实例已经初始化完毕了,组建已脱离创建阶段,进入运行阶段了。接下来的是运行中的两个事件

beforeUpdate()

这时候,表示 我们的界面还没有被更新【数据被更新了吗? 数据肯定被更新了】

updated

updated 事件执行的时候,页面和 data 数据已经保持同步了,都是最新的

beforeDestroy

销毁之前执行,当beforeDestroy函数执行时,表示vue实例已从运行阶段进入销毁阶段,vue实例身上所有的方法与数据都处于可用状态

destroyed

当destroy函数执行时,组件中所有的方法与数据已经被完全销毁,不可用

activated

页面出现的时候执行 activated生命周期函数,跟 监听 watch 有类似的作用。
activated生命周期函数,是配合 keep-alive 进行使用。进入页面时,mounted 与 activated 生命周期函数都会执行,当前 keep-alive 时,进行了缓存,这时返回上一页 ,mounted生命周期函数不会执行,而 activated 会执行。
注意:新增

deactivated

页面消失的时候执行,deactivated生命周期函数。是配合 keep-alive 进行使用
注意:新增


   

{{ msg }}

原作者链接:链接:https://www.jianshu.com/p/5430c8d0bf47

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