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 相关文章推荐
来自chinaz的ajax获取评论代码
May 03 Javascript
jQuery 动画基础教程
Dec 25 Javascript
jquery remove方法应用详解
Nov 22 Javascript
Javascript 浮点运算的问题分析与解决方法
Aug 27 Javascript
jQuery封装的tab选项卡插件分享
Jun 16 Javascript
angularjs学习笔记之双向数据绑定
Sep 26 Javascript
基于jquery实现省市联动效果
Nov 23 Javascript
AngularJS中如何使用echart插件示例详解
Oct 26 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
Feb 16 Javascript
Angularjs使用指令做表单校验的方法
Mar 31 Javascript
教你用Cordova打包Vue项目的方法
Oct 17 Javascript
解决element UI 自定义传参的问题
Aug 22 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
利用discuz自带通行证整合dedecms的方法以及文件下载
2007/03/06 PHP
解析PHP工厂模式的好处
2013/06/18 PHP
详解PHP错误日志的获取方法
2015/07/20 PHP
PHP+JavaScript实现无刷新上传图片
2017/02/21 PHP
判断控件是否已加载完成的代码
2010/02/24 Javascript
自己写的Javascript计算时间差函数
2013/10/28 Javascript
判断字符串的长度(优化版)中文占两个字符
2014/10/30 Javascript
node.js中的querystring.escape方法使用说明
2014/12/10 Javascript
JavaScript简单表格编辑功能实现方法
2015/04/16 Javascript
AngularJS使用ngOption实现下拉列表的实例代码
2016/01/23 Javascript
javascript表单控件实例讲解
2016/09/13 Javascript
nodejs简单实现操作arduino
2016/09/25 NodeJs
JS取模、取商及取整运算方法示例
2016/10/13 Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
2016/11/07 Javascript
javascript 中事件冒泡和事件捕获机制的详解
2017/09/01 Javascript
AngularJs1.x自定义指令独立作用域的函数传入参数方法
2018/10/09 Javascript
JavaScript中的&quot;=、==、===&quot;区别讲解
2019/01/22 Javascript
[02:56]DOTA2英雄基础教程 巨魔战将
2013/12/10 DOTA
Python实现网站文件的全备份和差异备份
2014/11/30 Python
python实现下载文件的三种方法
2017/02/09 Python
Python如何发布程序的详细教程
2018/10/09 Python
python3的print()函数的用法图文讲解
2019/07/16 Python
基于python求两个列表的并集.交集.差集
2020/02/10 Python
Python爬虫+Tkinter制作一个翻译软件的示例
2021/02/20 Python
CSS3教程:background-clip和background-origin
2008/10/17 HTML / CSS
巧用CSS3 border实现图片遮罩效果代码
2012/04/09 HTML / CSS
使用HTML5 Canvas API控制字体的显示与渲染的方法
2016/03/24 HTML / CSS
新东网科技Java笔试题
2012/07/13 面试题
修理厂厂长岗位职责
2014/01/30 职场文书
超市中秋节活动方案
2014/02/12 职场文书
2014县委书记四风对照检查材料思想汇报
2014/09/21 职场文书
广播稿:校园广播稿范文
2019/04/17 职场文书
《悲惨世界》:比天空更广阔的是人的心灵
2020/01/16 职场文书
不要在HTML中滥用div
2021/05/08 HTML / CSS
Redis分布式锁Redlock的实现
2021/08/07 Redis
python 离散点图画法的实现
2022/04/01 Python