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 相关文章推荐
关于恒等于(===)和非恒等于(!==)
Aug 20 Javascript
js removeChild 障眼法 可能出现的错误
Oct 06 Javascript
JavaScript经典效果集锦
Jul 06 Javascript
javascript字符串拼接的效率问题
Dec 25 Javascript
js网页实时倒计时精确到秒级
Feb 10 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
Jan 16 Javascript
微信小程序实现锚点定位楼层跳跃的实例
May 18 Javascript
js 将canvas生成图片保存,或直接保存一张图片的实现方法
Jan 02 Javascript
vue项目打包之后背景样式丢失的解决方案
Jan 17 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
Jun 17 Javascript
Vue 使用beforeEach实现登录状态检查功能
Oct 31 Javascript
解决vue单页面应用打包后相对路径、绝对路径相关问题
Aug 14 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
支付宝接口开发集成支付环境小结
2015/03/17 PHP
CI配置多数据库访问的方法
2016/03/28 PHP
iOS10推送通知开发教程
2016/09/19 PHP
PHP面向对象程序设计__tostring()和__invoke()用法分析
2019/06/12 PHP
Thinkphp框架+Layui实现图片/文件上传功能分析
2020/02/07 PHP
javascript入门·对象属性方法大总结
2007/10/01 Javascript
JavaScript 事件对象的实现
2009/07/13 Javascript
jQuery toggle()设置CSS样式
2009/11/05 Javascript
js中的值类型和引用类型小结 文字说明与实例
2010/12/12 Javascript
javascript中使用正则计算中文长度的例子
2014/04/29 Javascript
js精美的幻灯片画集特效代码分享
2015/08/29 Javascript
AngularJS基础 ng-class-odd 指令示例
2016/08/01 Javascript
微信小程序图片宽100%显示并且不变形
2017/06/21 Javascript
详解vue-cli3开发Chrome插件实践
2019/05/29 Javascript
Javascript数组方法reduce的妙用之处分享
2019/06/10 Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
2020/04/17 Javascript
[50:45]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第一场
2018/04/10 DOTA
[46:44]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
更改Ubuntu默认python版本的两种方法python-&gt; Anaconda
2016/12/18 Python
Python时间获取及转换知识汇总
2017/01/11 Python
Python File readlines() 使用方法
2018/03/19 Python
python+pandas生成指定日期和重采样的方法
2018/04/11 Python
Python3+django2.0+apache2+ubuntu14部署网站上线的方法
2018/07/07 Python
为什么Python中没有&quot;a++&quot;这种写法
2018/11/27 Python
Python设计模式之简单工厂模式实例详解
2019/01/22 Python
Python代码实现删除一个list里面重复元素的方法
2019/04/02 Python
Python利用pandas处理Excel数据的应用详解
2019/06/18 Python
Python 操作mysql数据库查询之fetchone(), fetchmany(), fetchall()用法示例
2019/10/17 Python
Python3操作YAML文件格式方法解析
2020/04/10 Python
Numpy中np.max的用法及np.maximum区别
2020/11/27 Python
美国在线面料商店:Online Fabric Store
2018/07/26 全球购物
瑞典耳机品牌:URBANISTA
2019/12/03 全球购物
三项教育活动实施方案
2014/03/30 职场文书
新课程改革心得体会
2016/01/22 职场文书
多人盗宝《绿林侠盗》第三赛季4.5上线 跨平台实装
2022/04/03 其他游戏
JavaScript实现音乐播放器
2022/08/14 Javascript