首页 > 其他 > 详细

理解vue生命周期中的钩子函数

时间:2018-01-23 19:27:27      阅读:526      评论:0      收藏:0      [点我收藏+]

先附一张官网流程图:

技术分享图片

下面前4个钩子函数,就是vue组件生命周期前4个过程,5、6过程是页面渲染完成后还需更新页面(增删改查)的过程,最后两个是删除组件。

    beforeCreate: function () {
      // 这个时候 el 和 data 均没有初始化。
      alert("Vue实例化之前");
    },
    created: function () {
      // 这个时候 data 已经初始化, el 没有初始化。
      alert("Vue实例化完毕");
    },
    beforeMount: function () {
      // 这个时候虽然页面没有显示,但已经用虚拟Dom技术占了坑,el和data均已初始化。
      alert("Vue实例化完毕,挂载到Dom前"); 
    },
    mounted: function () {
      // 这个时候页面已经显示。
      alert("Vue实例化完毕,挂载完成");
    },
    beforeUpdate: function () {
      // Vue实例化完毕且挂载完成后,如果对页面增删改查,页面未更新,但虚拟Dom已经更新
      alert("页面未更新");
    },
    updated: function () {
      // 这个时候页面已经更新。
      alert("页面已更新");
    },
    beforeDestroy: function () {
      alert("销毁前");
    },
    destroyed: function () {
      alert("销毁完成");
    }

 

理解vue生命周期中的钩子函数

原文:https://www.cnblogs.com/gr07/p/8337052.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!