Vue生命周期示例详解


Posted in Javascript onApril 12, 2017

首先看看Vue文档里关于实例生命周期的解释图

Vue生命周期示例详解

那么下面我们来进行测试一下

<section id="app-8">
 {{data}}
</section>
var myVue=new Vue({
  el:"#app-8",
  data:{
   data:"aaaaa",
   info:"nono"
  },
  beforeCreate:function(){
   console.log("创建前========")
   console.log(this.data)
   console.log(this.$el)
  },
  created:function(){
   console.log("已创建========")
   console.log(this.info)
   console.log(this.$el)
  },
  beforeMount:function(){
   console.log("mount之前========")
   console.log(this.info)
   console.log(this.$el)
  },
  mounted:function(){
   console.log("mounted========")
   console.log(this.info)
   console.log(this.$el)
  },
  beforeUpdate:function(){
   console.log("更新前========");

  },
  updated:function(){
   console.log("更新完成========");
  },
  beforeDestroy:function(){
   console.log("销毁前========")
   console.log(this.info)
   console.log(this.$el)
  },
  destroyed:function(){
   console.log("已销毁========")
   console.log(this.info)
   console.log(this.$el)
  }
 })

代码如上,浏览器开始加载文件

Vue生命周期示例详解

Vue生命周期示例详解

Vue生命周期示例详解

由上图可知:

1、beforeCreate 此时$el、data 的值都为undefined

2、创建之后,此时可以拿到data的值,但是$el依旧为undefined

3、mount之前,$el的值为“虚拟”的元素节点

4、mount之后,mounted之前,“虚拟”的dom节点被真实的dom节点替换,并将其插入到dom树中,于是在触发mounted时,可以获取到$el为真实的dom元素()

myVue.$el===document.getElementById("app-8") // true

接着,在console中修改data,更新视图

Vue生命周期示例详解

触发beforeUpdata 和updated

接着,执行myVue.$destroy()

Vue生命周期示例详解

总结一下,对官方文档的那张图简化一下,就得到了这张图

Vue生命周期示例详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JAVASCRIPT下判断IE与FF的比较简单的方式
Oct 17 Javascript
javascript 构建一个xmlhttp对象池合理创建和使用xmlhttp对象
Jan 15 Javascript
HTML上传控件取消选择
Mar 06 Javascript
js中cookie的添加、取值、删除示例代码
Oct 21 Javascript
jQuery插件Slider Revolution实现响应动画滑动图片切换效果
Jun 05 Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
Feb 20 Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
May 09 Javascript
动态加载权限管理模块中的Vue组件
Jan 16 Javascript
基于vue-cli、elementUI的Vue超简单入门小例子(推荐)
Apr 17 Javascript
jquery传参及获取方式(两种方式)
Feb 13 jQuery
Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码
May 18 Javascript
你不知道的 TypeScript 高级类型(小结)
Aug 28 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
Apr 12 #Javascript
easyui-datagrid特殊字符不能显示的处理方法
Apr 12 #Javascript
JavaScript数据结构中串的表示与应用实例
Apr 12 #Javascript
javascript数据结构之串的概念与用法分析
Apr 12 #Javascript
详解RequireJS按需加载样式文件
Apr 12 #Javascript
JS表格组件神器bootstrap table使用指南详解
Apr 12 #Javascript
详谈jQuery.load()和Jsp的include的区别
Apr 12 #jQuery
You might like
php隐藏IP地址后两位显示为星号的方法
2014/11/21 PHP
smarty自定义函数用法示例
2016/05/20 PHP
利用php获得flv视频长度的实例代码
2017/10/26 PHP
PHP 二维array转换json的实例讲解
2018/08/21 PHP
Laravel find in set排序实例
2019/10/09 PHP
基于jquery实现的鼠标滑过按钮改变背景图片
2011/07/15 Javascript
关于图片按比例自适应缩放的js代码
2011/10/30 Javascript
详细介绍8款超实用JavaScript框架
2013/10/25 Javascript
js使用心得分享
2015/01/13 Javascript
使用coffeescript编写node.js项目的方法汇总
2015/08/05 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
2016/01/14 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
2016/08/13 Javascript
浅析JavaScript中var that=this
2017/02/17 Javascript
Nodejs之TCP服务端与客户端聊天程序详解
2017/07/07 NodeJs
JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍
2018/03/01 Javascript
vue实现购物车抛物线小球动画效果的方法详解
2019/02/13 Javascript
Vue实现穿梭框效果
2020/09/30 Javascript
[49:54]Ti4 循环赛第三日 LGD vs Titan
2014/07/12 DOTA
Django应用程序中如何发送电子邮件详解
2017/02/04 Python
python 使用get_argument获取url query参数
2017/04/28 Python
Python中的groupby分组功能的实例代码
2018/07/11 Python
python 中Arduino串口传输数据到电脑并保存至excel表格
2019/10/14 Python
CSS3解析抖音LOGO制作的方法步骤
2019/04/11 HTML / CSS
印度婴儿用品在线商店:Firstcry.com
2016/12/05 全球购物
马来西亚排名第一的宠物用品店:Pets Wonderland
2020/04/16 全球购物
类的返射机制中的包及核心类
2016/09/12 面试题
大学毕业生文采飞扬的自我鉴定
2013/12/03 职场文书
会计电算化专业毕业生推荐信
2013/12/24 职场文书
司机检讨书
2014/02/13 职场文书
材料加工工程求职信
2014/02/19 职场文书
大学校务公开实施方案
2014/03/31 职场文书
幼儿教师师德师风演讲稿
2014/08/22 职场文书
小学生九一八纪念日83周年演讲稿500字
2014/09/17 职场文书
史上最全书信经典范文大全(建议收藏)
2019/07/10 职场文书
Python通过m3u8文件下载合并ts视频的操作
2021/04/16 Python
javascript之Object.assign()的痛点分析
2022/03/03 Javascript