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文件优化
Dec 08 Javascript
javascript实现禁止鼠标滚轮事件
Jul 24 Javascript
javascript实现右侧弹出“分享到”窗口效果
Feb 01 Javascript
JavaScript登录验证码的实现
Oct 27 Javascript
Angular动态添加、删除输入框并计算值实例代码
Mar 29 Javascript
vue中路由参数传递可能会遇到的坑
Dec 07 Javascript
js生成word中图片处理方法
Jan 06 Javascript
详解vue项目接入微信JSSDK的坑
Dec 14 Javascript
JS实现的贪吃蛇游戏完整实例
Jan 18 Javascript
ES6入门教程之Array.from()方法
Mar 23 Javascript
小程序实现左滑删除效果
Jul 25 Javascript
jquery.pager.js实现分页效果
Jul 29 jQuery
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
php检测iis环境是否支持htaccess的方法
2014/02/18 PHP
PHP产生不重复随机数的5个方法总结
2014/11/12 PHP
php函数重载的替代方法--伪重载详解
2015/05/08 PHP
PHP加密解密类实例代码
2016/07/20 PHP
ThinkPHP框架使用redirect实现页面重定向的方法实例分析
2018/04/12 PHP
html读出文本文件内容
2007/01/22 Javascript
基于Jquery实现键盘按键监听
2014/05/11 Javascript
JavaScript结合AJAX_stream实现流式显示
2015/01/08 Javascript
jquery插件jquery.confirm弹出确认消息
2015/12/22 Javascript
JS加载iFrame出现空白问题的解决办法
2016/05/13 Javascript
js多功能分页组件layPage使用方法详解
2016/05/19 Javascript
jQuery 跨域访问解决原理案例详解
2016/07/09 Javascript
javascript数组去重方法分析
2016/12/15 Javascript
vue-resource 拦截器(interceptor)的使用详解
2017/07/04 Javascript
vue2.0模拟锚点的实例
2018/03/14 Javascript
vue 实现滚动到底部翻页效果(pc端)
2019/07/31 Javascript
详解Vue 单文件组件的三种写法
2020/02/19 Javascript
uni-app实现获取验证码倒计时功能
2020/11/01 Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
2020/11/11 Javascript
Vue 数据响应式相关总结
2021/01/28 Vue.js
原生js 实现表单验证功能
2021/02/08 Javascript
在Python中操作时间之mktime()方法的使用教程
2015/05/22 Python
Pycharm学习教程(5) Python快捷键相关设置
2017/05/03 Python
python 实现对数据集的归一化的方法(0-1之间)
2018/07/17 Python
Python求两点之间的直线距离(2种实现方法)
2019/07/07 Python
Pyqt5自适应布局实例
2019/12/13 Python
大学本科生的个人自我评价
2013/12/09 职场文书
爽歪歪广告词
2014/03/20 职场文书
老师对学生的评语
2014/04/18 职场文书
《天游峰的扫路人》教学反思
2014/04/25 职场文书
幼儿教师师德承诺书
2014/05/23 职场文书
乡镇防汛工作汇报
2014/10/28 职场文书
英雄儿女观后感
2015/06/09 职场文书
同学聚会开幕词
2019/04/02 职场文书
Golang 字符串的常见操作
2022/04/19 Golang
vue3.0 数字翻牌组件的使用方法详解
2022/04/20 Vue.js