图集1/1

正文 910字数 253,631阅读


一.什么是生命周期:
vue每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁，这就是一个组件所谓的生命周期

二.生命周期分类: 一共有八个时期:
beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed
Run code
Cut to clipboard


    三.执行顺序:


    1.beforeCreate (创建前)
    在beforeCreate阶段vue实例的挂载元素el和数据对象data都为undefined,还未初始化
    因此无法访问methods,data,computed等上的方法和数据。

    2.created(创建后)
    在created阶段，vue实例的数据对象data有了，el还没有.
    你可以调用methods中的方法,改变data中的数据.
    并且修改可以通过vue的响应式绑定体在页面上,获取computed中的计算属性等等

    3.beforeMount(挂载之前)
    在beforeMount阶段,vue实例的el和data都初始化了,
    但还是挂载之前为虚拟的dom节点，data尚未替换。
    完成了el和data 初始化，注意此时还没有挂在html到页面上。

    4.mounted(挂载完成)
    在mounted阶段，vue实例挂载完成，data成功渲染。
    这时一般可以做一些ajax操作，mounted只会执行一次。

    5.beforeUpdate(更新之前)
    当data变化之前，会触发beforeUpdate。不常用

    6.updated(更新之后)
    当data变化之后，会触发Updated。不常用

    7.beforeDestory(实例销毁前)
    beforeDestory是在vue实例销毁前触发,一般在这里要removeEventListener解除手动绑定的事件

    8.destoryed(实例销毁后)
    执行destroy方法后，vue实例已经解除了事件监听以及dom的绑定，但是dom结构依然存在

    总结:ok,以上就是vue的整个生命周期,只需要按需求在不同的阶段执行不同的钩子函数即可