Vue 2.0中生命周期与钩子函数的一些理解


Posted in Javascript onMay 09, 2017

前言

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

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

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

vue生命周期简介

Vue 2.0中生命周期与钩子函数的一些理解

Vue 2.0中生命周期与钩子函数的一些理解

咱们从上图可以很明显的看出现在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浏览器里打开,F12看console就能发现

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

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

Vue 2.0中生命周期与钩子函数的一些理解

update 相关

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

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

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

Vue 2.0中生命周期与钩子函数的一些理解

destroy 相关

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

app.$destroy();

Vue 2.0中生命周期与钩子函数的一些理解

生命周期总结

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

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

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

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
firefox事件处理之自动查找event的函数(用于onclick=foo())
Aug 05 Javascript
Node.js程序中的本地文件操作用法小结
Mar 06 Javascript
第五篇Bootstrap 排版
Jun 21 Javascript
AngularJS中$http服务常用的应用及参数
Aug 22 Javascript
JavaScript中Number对象的toFixed() 方法详解
Sep 02 Javascript
浅谈Web页面向后台提交数据的方式和选择
Sep 23 Javascript
如何判断出一个js对象是否一个dom对象
Nov 24 Javascript
深入理解jQuery.data() 的实现方式
Nov 30 Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
Jan 19 Javascript
vue引入swiper插件的使用实例
Jul 19 Javascript
浅谈Node 调试工具入门教程
Mar 20 Javascript
AngularJS ui-router刷新子页面路由的方法
Jul 23 Javascript
JavaScript中splice与slice的区别
May 09 #Javascript
详解node中创建服务进程
May 09 #Javascript
微信小程序 自动登陆PHP源码实例(源码下载)
May 08 #Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 #jQuery
微信小程序 标签传入数据
May 08 #Javascript
Webpack实现按需打包Lodash的几种方法详解
May 08 #Javascript
JS正则表达式验证中文字符
May 08 #Javascript
You might like
《魔兽争霸3:重制版》更新 多项视觉效果调整
2020/05/04 魔兽争霸
Yii2超好用的日期和时间组件(值得收藏)
2016/05/05 PHP
yii的入口文件index.php中为什么会有这两句
2016/08/04 PHP
php使用PDO下exec()函数查询执行后受影响行数的方法
2017/03/28 PHP
PDO::getAvailableDrivers讲解
2019/01/28 PHP
JQuery在光标位置插入内容的实现代码
2010/06/18 Javascript
jquery对dom的操作常用方法整理
2013/06/25 Javascript
jquery触发a标签跳转事件示例代码
2013/07/21 Javascript
JQuery实现左右滚动菜单特效
2015/09/28 Javascript
JavaScript来实现打开链接页面的简单实例
2016/06/02 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
2016/06/12 Javascript
JS 数字转换为大写金额的简单实例
2016/08/04 Javascript
利用AngularJs实现京东首页轮播图效果
2016/09/08 Javascript
详解react关于事件绑定this的四种方式
2018/03/09 Javascript
JS实现使用POST方式发送请求
2019/08/30 Javascript
NodeJs crypto加密制作token的实现代码
2019/11/15 NodeJs
[01:36:57]【09DOTA2第一视角】小骷髅
2014/04/16 DOTA
[01:10:49]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
python进阶教程之动态类型详解
2014/08/30 Python
Pyhton中单行和多行注释的使用方法及规范
2016/10/11 Python
在pycharm中使用matplotlib.pyplot 绘图时报错的解决
2020/06/01 Python
python入门教程之基本算术运算符
2020/11/13 Python
Restful_framework视图组件代码实例解析
2020/11/17 Python
分享CSS3中必须要知道的10个顶级命令
2012/04/26 HTML / CSS
HTML5实现文件断点续传的方法
2017/01/04 HTML / CSS
canvas学习和滤镜实现代码
2018/08/22 HTML / CSS
美国女士泳装店:Swimsuits For All
2017/03/02 全球购物
亲子读书活动方案
2014/02/22 职场文书
葛优非诚勿扰搞笑征婚台词
2014/03/17 职场文书
领导干部廉政承诺书
2014/03/27 职场文书
幼儿园法制宣传日活动总结
2014/11/01 职场文书
人才市场接收函
2015/01/30 职场文书
2015年外联部工作总结
2015/04/03 职场文书
清明祭英烈活动总结
2015/05/11 职场文书
2015年学校办公室主任工作总结
2015/07/20 职场文书
vue-cil之axios的二次封装与proxy反向代理使用说明
2022/04/07 Vue.js