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 相关文章推荐
JavaScript 对Cookie 操作的封装小结
Dec 31 Javascript
javascript比较两个日期相差天数的方法
Jul 24 Javascript
JavaScript中动态向表格添加数据
Jan 24 Javascript
Angular2中监听数据更新的方法
Aug 31 Javascript
Vue指令指令大全
Feb 09 Javascript
Angular实现svg和png图片下载实现
May 05 Javascript
使用原生js编写一个简单的框选功能方法
May 13 Javascript
java实现单链表增删改查的实例代码详解
Aug 30 Javascript
JavaScript cookie原理及使用实例
May 08 Javascript
uni-app从安装到卸载的入门教程
May 15 Javascript
完美解决vue 中多个echarts图表自适应的问题
Jul 19 Javascript
Openlayers3实现车辆轨迹回放功能
Sep 29 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
JpGraph php柱状图使用介绍
2011/08/23 PHP
深入探讨:Nginx 502 Bad Gateway错误的解决方法
2013/06/03 PHP
ThinkPHP3.1新特性之G方法的使用
2014/06/19 PHP
PHP基于cookie与session统计网站访问量并输出显示的方法
2016/01/15 PHP
PHP实现的二分查找算法实例分析
2017/12/19 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
PHP使用 Imagick 扩展实现图片合成,圆角处理功能示例
2019/09/09 PHP
ThinkPHP 5.1 跨域配置方法
2019/10/11 PHP
10个新的最有前途的JavaScript框架
2009/03/12 Javascript
JSON 客户端和服务器端的格式转换
2009/08/27 Javascript
JavaScript格式化数字的函数代码
2010/11/30 Javascript
再谈Jquery Ajax方法传递到action(补充)
2014/05/12 Javascript
jquery实现的蓝色二级导航条效果代码
2015/08/24 Javascript
jquery实现图片水平滚动效果代码分享
2015/08/26 Javascript
常用的js验证和数据处理总结
2016/08/02 Javascript
微信小程序 loading 详解及实例代码
2016/11/09 Javascript
Vue-Router实现页面正在加载特效方法示例
2017/02/12 Javascript
jquery表单验证实例仿Toast提示效果
2017/03/03 Javascript
JS变量及其作用域
2017/03/29 Javascript
基于vue2实现上拉加载功能
2017/11/28 Javascript
jQuery EasyUI window窗口使用实例代码
2017/12/25 jQuery
Vue press 支持图片放大功能的实例代码
2018/11/09 Javascript
微信小程序实现评论功能
2018/11/28 Javascript
JS中min函数实例讲解
2019/02/18 Javascript
js+h5 canvas实现图片验证码
2020/10/11 Javascript
利用python画一颗心的方法示例
2017/01/31 Python
Python 给屏幕打印信息加上颜色的实现方法
2019/04/24 Python
Python中的四种交换数值的方法解析
2019/11/18 Python
python 实现多维数组转向量
2019/11/30 Python
10个示例带你掌握python中的元组
2020/11/23 Python
经贸专业毕业生求职信
2014/03/23 职场文书
行政内勤岗位职责
2014/04/07 职场文书
倡议书范文格式
2014/05/12 职场文书
2019年大学毕业生个人自我鉴定范文大全
2019/03/21 职场文书
python使用tkinter实现透明窗体上绘制随机出现的小球(实例代码)
2021/05/17 Python
深入解读Java三大集合之map list set的用法
2021/11/11 Java/Android