Vue2.0 探索之路——生命周期和钩子函数的一些理解

727

前言

在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的。放大之,对vue的生命周期不甚了解。只知道简单的使用,而不知道为什么,这对后面的踩坑是相当不利的。

因为我们有时候会在几个钩子函数里做一些事情,什么时候做,在哪个函数里做,我们不清楚。

于是我开始先去搜索,发现vue2.0的生命周期没啥文章。大多是1.0的版本介绍。最后还是找到一篇不错的(会放在最后)

vue生命周期简介

clipboard.png

f847b38a-63fe-11e6-9c29-38e58d46f036.png

咱们从上图可以很明显的看出现在vue2.0都包括了哪些生命周期的函数了。

生命周期探究

对于执行顺序和什么时候执行,看上面两个图基本有个了解了。下面我们将结合代码去看看钩子函数的执行。

ps:下面代码可以直接复制出去执行
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>
<body>

<div id="app">
     <p>{{ message }}</p>
</div>

<script type="text/javascript">
    
  var app = new Vue({
      el: '#app',
      data: {
          message : "xuxiao is boy" 
      },
       beforeCreate: function () {
                console.group('beforeCreate 创建前状态===============》');
               console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined
               console.log("%c%s", "color:red","data   : " + this.$data); //undefined 
               console.log("%c%s", "color:red","message: " + this.message)  
        },
        created: function () {
            console.group('created 创建完毕状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el); //undefined
               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化 
               console.log("%c%s", "color:red","message: " + this.message); //已被初始化
        },
        beforeMount: function () {
            console.group('beforeMount 挂载前状态===============》');
            console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化
            console.log(this.$el);
               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化  
               console.log("%c%s", "color:red","message: " + this.message); //已被初始化  
        },
        mounted: function () {
            console.group('mounted 挂载结束状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化
            console.log(this.$el);    
               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
               console.log("%c%s", "color:red","message: " + this.message); //已被初始化 
        },
        beforeUpdate: function () {
            console.group('beforeUpdate 更新前状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);   
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message); 
        },
        updated: function () {
            console.group('updated 更新完成状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el); 
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message); 
        },
        beforeDestroy: function () {
            console.group('beforeDestroy 销毁前状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);    
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message); 
        },
        destroyed: function () {
            console.group('destroyed 销毁完成状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);  
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message)
        }
    })
</script>
</body>
</html>

create 和 mounted 相关

咱们在chrome浏览器里打开,F12console就能发现

beforecreated:el 和 data 并未初始化
created:完成了 data 数据的初始化,el没有
beforeMount:完成了 el 和 data 初始化
mounted :完成挂载

另外在标红处,我们能发现el还是 {{message}},这里就是应用的 Virtual DOM(虚拟Dom)技术,先把坑占住了。到后面mounted挂载的时候再把值渲染进去。

clipboard.png

update 相关

这里我们在 chrome console里执行以下命令

app.message= 'yes !! I do';

下面就能看到data里的值被修改后,将会触发update的操作。

clipboard.png

destroy 相关

有关于销毁,暂时还不是很清楚。我们在console里执行下命令对 vue实例进行销毁。销毁完成后,我们再重新改变message的值,vue不再对此动作进行响应了。但是原先生成的dom元素还存在,可以这么理解,执行了destroy操作,后续就不再受vue控制了。

app.$destroy();

clipboard.png

生命周期总结

这么多钩子函数,我们怎么用呢,我想大家可能有这样的疑问吧,我也有,哈哈哈。

beforecreate : 举个栗子:可以在这加个loading事件
created :在这结束loading,还做一些初始化,实现函数自执行
mounted : 在这发起后端请求,拿回数据,配合路由钩子做一些事情
beforeDestroy: 你确认删除XX吗? destroyed :当前组件已被删除,清空相关内容

当然,还有更多,继续探索中......

写在最后

本文是一个vue的生命周期的理解,如有错误还请大牛指正,让小子也有得进步。
如果对你有所帮助,那是我最大的荣幸。

对了,兄台,对你有帮助的话不妨点个收藏或者推荐再走。

3477288873-5808ad0a8d62c_articlex

参考文献

https://segmentfault.com/q/10...
http://www.cnblogs.com/gagag/...

感谢上面几位兄台的文章和提问。

另外新写了篇 vuex 的文章,欢迎各位给点意见。传送门:Vue2.0 探索之路——vuex入门教程和思考
新写了篇 vue-router的文章,也欢迎各位给点意见。传送门:Vue2.0 探索之路——vue-router入门教程和总结

最近更新文章:
Node环境变量 process.env 的那些事儿


如果觉得我的文章对你有用,请随意赞赏
已赞赏

你可能感兴趣的

89 条评论
唐大豆 · 2017年02月10日

对于初学者来说非常有用!!感谢!!太有帮助了

+8 回复

3

忍不住再说一次 写得简单易懂 还有举例 流下了感谢的眼泪.....

唐大豆 · 2017年02月10日
0

@唐大豆 我也是初学者啊,明白一个初学者到底想知道啥。蛤蛤蛤,马上会有一篇vuex的入门放送。

城南 作者 · 2017年02月12日
0

@夏日蝉鸣 期待vuex, 现在项目中用vuex但是觉得自己对vuex理解有问题,很多场景用的不对

youngleish · 2017年03月03日
我是大神 · 2017年10月26日

兄弟,那感觉beforupdata和updata没什么区别??

+5 回复

PainAndLove · 2017年02月27日

created() 里放请求比较好吧。。毕竟这时候DOM还没开始渲染,等把数据请求回来了一起渲染岂不是挺好?

+4 回复

1

嗯,一般放在 created()里,如果你有依赖dom做一些其他的操作就放到mounted()

城南 作者 · 2017年02月28日
0

数据请求和耗时操作放在created()中比较好,数据修改后更新dom的操作可以放在this.$nextTick回调中

Justicky · 4月15日
0

一般请求都是异步的把。而且等数据请求回来一起渲染的体验不是很糟糕吗,,,

苹果虫 · 5月25日
jrainlau · 2017年01月05日

那个表格里面的“不确定…”到底是啥回事

+3 回复

0

调用销毁方法了,this就没有指向了啊,所以就undefined了

庸医治大病 · 5月16日
曾广营 · 2017年01月06日

建议结合路由钩子,将路由钩子的周期也列上去

+3 回复

瓜皮酱的耳朵 · 2017年02月01日

有个地方打错了,应该是app.$destroy();

+1 回复

0

感谢兄台指出,哈哈哈,确实是。

城南 作者 · 2017年02月06日
喵喵喵喵喵 · 2017年07月17日

Thanks,it's really useful for me !

+1 回复

城南 作者 · 2017年01月06日

谢谢大神的建议,后面学习会补上。昨天正好看到你的vue校验组件,真厉害,理解学习中。

回复

pc813 · 2017年03月02日

夏日蝉鸣 你好,我把此文章放到了 linkedinfo.co ,我的一个业余小项目。如您觉得不妥,请随时联系我将之撤下。

linkedinfo.co 是一个集合了各类优秀技术文章的站点,它并不展现全文,所有条目都附上作者与原文链接,读者最终都会进入到作者原文的站点。做 linkedinfo 的初衷是想方便自己且方便其他想学习的朋友,能更方便地找到自己感兴趣的技术文章。同时这也是一个我自己练习的过程,比如将正在学习的 Semantic Web 技术应用到 linkedinfo 来更好地连接不同的知识。

各位感兴趣的朋友可以去 http://linkedinfo.co 看看,非常希望能得到你们的意见与建议(about 页面留言 http://linkedinfo.co/about)。

回复

2

已经回访,不错不错,可以的,也谢谢收录。

城南 作者 · 2017年03月02日
LeoZeng · 2017年03月06日

为何我的 chrome 浏览器在显示 beforeMount 函数里的 el 为 undefined ?
el 在 mounted 时才打印出来?
难道是版本更新导致的?

回复

0

我的情况跟你的一样,也是在beforeMount函数里面是undefined,跟作者说的标红处实现了虚拟dom那里不太一致

fantasy525 · 2017年05月27日
0

同问

wang1006tao · 2017年09月08日
LeoZeng · 2017年03月06日

我的 vue 版本为最新版本 2.2.1

回复

LeoZeng · 2017年03月06日

测试了一下在 vue 2.0.3 的版本下 chrome 控制台显示的结果跟作者的结果一样。故 vue 版本更新的问题。

回复

0

我2.2以上版本和你的效果是一样

不胖 · 2017年11月02日
小螺号 · 2017年04月13日

点赞!

回复

0

谢谢侬的支持~~这是我的动力。

城南 作者 · 2017年04月25日
0

@夏日蝉鸣 居然用“侬”,难不成真的猜到我在上海。。。

小螺号 · 2017年04月25日
Honey_hoo · 2017年04月25日

好棒,懵逼了好几天的生命周期终于弄懂了。?

回复

0

我的荣幸~~哈哈哈,已经开始写 vue-router的文章了,本周放出,欢迎来捧场哈。

城南 作者 · 2017年04月25日
0

+1 感谢作者

tcy · 3月20日
liuchang · 2017年05月05日

也一直迷惑这些函数 现在差不多懂了

回复

青棘 · 2017年06月06日

3Q,感觉弄懂后,自己的vue水平也是自信满满了

回复

0

haha,一起努力,vue还有很多好玩的东西呢

城南 作者 · 2017年06月07日
青棘 · 2017年06月06日

我参考你的文章,加上自己的理解写了一篇文章,注明出处了,可以吗

回复

0

没问题的~~

城南 作者 · 2017年06月07日
can_fly_fish · 2017年06月07日

非常好,太棒了

回复

0

能帮到你们一点,这就足够了,我也很开心

城南 作者 · 2017年06月07日
0

我现在在想组件更新前和更新后状态是一样的,有什么区别呢和用处呢

can_fly_fish · 2017年06月07日
0

对。同问,为什么更新前和更新后是一样的,数据怎么在beforeUpdate的时候就更新完了

向着阳光 · 2017年09月22日
羊爸爸 · 2017年06月08日

我只能说666

回复

teamemory · 2017年06月08日

很好,尤其是console.log中的打印出来,我算是明白了生命周期的过程

回复

载入中...