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如何处理从java后台返回的list
Apr 24 Javascript
js/jquery判断浏览器的方法小结
Sep 02 Javascript
BootStrap iCheck插件全选与获取value值的解决方法
Aug 24 Javascript
Vue.js每天必学之计算属性computed与$watch
Sep 05 Javascript
bootstrap侧边栏圆点导航
Jan 11 Javascript
80%应聘者都不及格的JS面试题
Mar 21 Javascript
AngularJS入门教程二:在路由中传递参数的方法分析
May 27 Javascript
react配合antd组件实现的管理系统示例代码
Apr 24 Javascript
让 babel webpack vue 配置文件支持智能提示的方法
Jun 22 Javascript
JS原型和原型链原理与用法实例详解
Feb 05 Javascript
小程序使用分包的示例代码
Mar 23 Javascript
vue实现动态表格提交参数动态生成控件的操作
Nov 09 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
详解:――如何将图片储存在数据库里
2006/12/05 PHP
PHP导入导出Excel代码
2015/07/07 PHP
PHP中SQL查询语句的id=%d解释(推荐)
2016/12/10 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
JS代码优化技巧之通俗版(减少js体积)
2011/12/23 Javascript
jQuery打印指定区域Html页面并自动分页
2014/07/04 Javascript
javascript文本框内输入文字倒计数的方法
2015/02/24 Javascript
JavaScript的jQuery库插件的简要开发指南
2015/08/12 Javascript
JS 学习总结之正则表达式的懒惰性和贪婪性
2017/07/03 Javascript
微信小程序获取循环元素id以及wx.login登录操作
2017/08/17 Javascript
vue登录路由验证的实现
2017/12/13 Javascript
React学习笔记之高阶组件应用
2018/06/02 Javascript
JS Ajax请求会话过期处理问题解决方法分析
2019/11/16 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
2020/11/05 Javascript
K-近邻算法的python实现代码分享
2017/12/09 Python
python使用Plotly绘图工具绘制散点图、线形图
2019/04/02 Python
python 实现多线程下载视频的代码
2019/11/15 Python
Python pickle模块实现对象序列化
2019/11/22 Python
matplotlib绘制多个子图(subplot)的方法
2019/12/03 Python
使用python写一个自动浏览文章的脚本实例
2019/12/05 Python
如何基于python实现脚本加密
2019/12/28 Python
python中文分词库jieba使用方法详解
2020/02/11 Python
细数nn.BCELoss与nn.CrossEntropyLoss的区别
2020/02/29 Python
Python作用域与名字空间原理详解
2020/03/21 Python
python 深度学习中的4种激活函数
2020/09/18 Python
阿迪达斯俄罗斯官方商城:adidas俄罗斯
2017/03/08 全球购物
MCAKE蛋糕官方网站:一直都是巴黎的味道
2018/02/06 全球购物
入党积极分子思想汇报范文
2014/01/05 职场文书
优秀导游先进事迹材料
2014/01/25 职场文书
简历中个人自我评价分享
2014/03/15 职场文书
标准离婚协议书范文下载
2014/11/30 职场文书
2015年幼儿园保育员工作总结
2015/04/23 职场文书
历史博物馆观后感
2015/06/05 职场文书
演讲稿:态度决定一切
2019/04/02 职场文书
Java方法重载和方法重写的区别到底在哪?
2021/06/11 Java/Android
在Docker容器中部署SQL Server
2022/04/11 Servers