vue2生命周期函数

2018-12-10 16:38:51  卢浮宫  版权声明：本文为站长原创文章，转载请写明出处

QQ分享

---

一、前言

    在前端开发中经常会有Vue生命周期的一些操作，所以整理记录一下。

       

二、生命周期都有哪些及使用场景

  2.1、beforeCreate

        该函数在实例对象刚被创建，还没有绑定属性时触发执行。

        通常用于插件开发中执行一些初始化任务。

   2.2、created

        该函数在实例对象完成创建和属性绑定，但是DOM还未生成（$el属性还不存在）时触发执行。

        通常用于异步数据获取。

    2.3、beforeMont

        该函数在组件挂载之前触发执行。

    2.4、mounted

        该函数在组件挂载完成之后触发执行

        可用作于获取访问数据和Dom元素

    2.5、beforeUpdate

        该函数在组件数据更新之前触发执行

        可用于获取更新前的各种状态

    2.6、updated

        该函数在组件数据更新完成之后触发执行

    2.7、beforeDestory

        该函数在实例对象销毁之前触发执行

        可用作于定时器或者订阅的取消。

    2.8、destory

        该函数在实例对象完成销毁之后触发执行。

        可用作于定时器或者订阅的取消

三、各阶段钩子函数分析

    3.1、beforeCreated -> created

        初始化vue实例，进行数据观测

    3.2、created

        完成数据观测，属性与方法的运算，watch、event事件回调的配置
        可调用methods中的方法，访问和修改data数据触发响应式渲染dom，可通过computed和watch完成数据计算
        此时vm.$el 并没有被创建

    3.3、created -> beforeMount

        判断是否存在el选项，若不存在则停止编译，直到调用vm.$mount(el)才会继续编译
        优先级： render > template > outerHTML
        vm.el获取到的是挂载DOM的

    3.4、beforeMount

        在此阶段可获取到vm.el
        此阶段vm.el虽已完成DOM初始化，但并未挂载在el选项上

    3.5、beforeMount -> mounted

        此阶段vm.el完成挂载，vm.$el生成的DOM替换了el选项所对应的DOM

    3.6、mounted

        vm.el已完成DOM的挂载与渲染，此刻打印vm.$el，发现之前的挂载点及内容已被替换成新的DOM

    3.7、beforeUpdate

        更新的数据必须是被渲染在模板上的（el、template、render之一）
        此时view层还未更新
        若在beforeUpdate中再次修改数据，不会再次触发更新方法

    3.8、updated

        完成view层的更新
        若在updated中再次修改数据，会再次触发更新方法（beforeUpdate、updated）

    3.9、beforeDestroy

        实例被销毁前调用，此时实例属性与方法仍可访问

    3.10、destroyed

        完全销毁一个实例。可清理它与其它实例的连接，解绑它的全部指令及事件监听器
        并不能清除DOM，仅仅销毁实例

四、附生命周期图解

更多精彩请持续关注：guangmuhua.com