Vue2.0关于生命周期和钩子函数
Vue生命周期简介：
Vue1.0+和Vue2.0在生命周期钩子上的区别还是很大的，如下：
代码验证：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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:"Toney is a girl"
},
beforeCreate:function(){
console.group('beforeCreat 创建前的状态======》'); //控制台输出的语句产生不同的层级嵌套关系
console.log("%c%s","color:red","el : "+this.$el); //undefined, %c字符%s字符串
console.log("%c%s","color:red","data : "+this.$data"); //undefined
console.log("%c%s","color:red","message: "+this.message); //undefined
},
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("%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("%c%s","color:red","data : "+this.$data"); //已被初始化
console.log("%c%s","color:red","message: "+this.message); //已被初始化
},
beforeUpdate:function(){
console.log("beforeUpdate 更新前状态======》");
console.log("%c%s","color:red","el:"+this.$el);
console.log("%c%s","color:red","data:"+this.$data);
console.log("%c%s","color:red","message:"+this.$message);
},
updated:function(){
console.log("updated 更新完成状态======》");
console.log("%c%s","color:red","el:"+this.$el);
console.log("%c%s","color:red","data:"+this.$data);
console.log("%c%s","color:red","message:"+this.$message);
},
beforeDestory:function(){
console.log("beforeDestory 销毁前状态======》");
console.log("%c%s","color:red","el:"+this.$el);
console.log("%c%s","color:red","data:"+this.$data);
console.log("%c%s","color:red","message:"+this.$message);
},
destoryed:function(){
console.log("destoryed 销毁完成状态======》");
console.log("%c%s","color:red","el:"+this.$el);
console.log("%c%s","color:red","data:"+this.$data);
console.log("%c%s","color:red","message:"+this.$message);
}
})
</script>
</body>
关于更新
在chrome console中输入命令：
app.message="I am a girl"
关于销毁
在chrome console中输入命令：
app.$destroy();
生命周期总结：
beforecreate: 例子：可以在这加个loading事件；
created：在这结束loading，还做一些初始化，实现函数自执行；
mounted： 在这发起后端请求，拿回数据，配合路由钩子做一些事情；
beforeDestory： 你确认删除XX吗？ destoryed ：当前组件已被删除，清空相关内容。
Vue2.0关于生命周期和钩子函数的更多相关文章
- Vue2.0 探索之路——生命周期和钩子函数的一些理解
前言 在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周期不甚了解.只知道简单的使用,而不知道为什 ...
- Vue2.0 探索之路——生命周期和钩子函数的一些理解 - JS那些事儿
在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周期不甚了解.只知道简单的使用,而不知道为什么,这 ...
- Vue2.0 探索之路——生命周期和钩子函数
beforecreate :可以在这加个loading事件 created :在这结束loading,还做一些初始化,实现函数自执行 mounted : 在这发起后端请求,拿回数据,配合路由钩子做一些 ...
- vue学习之生命周期和钩子函数
参考文章:Vue2.0 探索之路——生命周期和钩子函数的一些理解 抛出问题: 我们有时候会在几个钩子函数里做一些事情,那么什么时候做,该在哪个函数里做? 生命周期简介 结合代码看el 和 data以及 ...
- Vue2.0生命周期和钩子函数的一些理解
转自:https://segmentfault.com/a/1190000008010666 前言 在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mount ...
- Vue2.0 【第二季】第4节 Vue的生命周期（钩子函数）
目录 Vue2.0 [第二季]第4节 Vue的生命周期(钩子函数) 第4节 Vue的生命周期(钩子函数) Vue2.0 [第二季]第4节 Vue的生命周期(钩子函数) 第4节 Vue的生命周期(钩子函 ...
- vue的生命周期（又称钩子函数）----以及vue1.0版本与vue2.0版本生命周期的不同
vue生命周期 1. vue1.0版本与vue2.0版本生命周期的不同 vue1.0版本生命周期图示 图1 vue1.0版本生命周期 vue1.0版本的生命周期: init 实例创建之前 creat ...
- Vue笔记：生命周期和钩子函数
前言 在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周期不甚了解.只知道简单的使用,而不知道为什 ...
- Vue（3）- 安装脚手架、过滤器、生命周期的钩子函数、vue-router基本使用
一.安装脚手架 1.下载node.js,本文下载版本为node-v8.12.0-x64.msi,一键式安装. 2.安装完成后,打开终端,输入node,可进入node环境(两次ctrl+c退出),如下图 ...
随机推荐
- Quartz,启动不立即执行问题
我的Quartz 是2.2版本, 在java程序中写了两个加入计划方法 //// 添加简单计划任务 author:iresearch.com.cn -- jackical public static ...
- JavaScript---设计模式之迭代器模式
迭代器模式提供一种方法顺序访问一个聚合对象中各个元素,而又不需要暴露该方法中的内部表示. jQuery中我们经常会用到一个each函数就是迭代器模式 作用 为遍历不同的集合结构提供一个统一的接口,从而 ...
- 关于 spring-aop理解
对于Aop 一直理解很是不到位 谈谈自己理解! Aop : Aspect: 切面 joinpoint 连接点 pointCut 切点 Advice 增强 targert 目标对象 w ...
- fildder抓包工具详解
fildder页面介绍名称和含义 名称 含义 # 抓取HTTP Request的顺序,从1开始,以此递增 Result HTTP状态码 Protocol 请求使用的协议,如HTTP/HTTPS/FTP ...
- python3学习之路_day1
登录程序1.输入用户名密码2.认证成功后显示欢迎信息3.输错三次后锁定 #!/usr/bin/env python #_*_coding:utf-8_*_ #by anthor gushiren 20 ...
- UZH slam 两种相机
1.event camera:http://rpg.ifi.uzh.ch/research_dvs.html 2.SCAMP Vision Sensor:https://personalpages.m ...
- LSTM调参经验
0.开始训练之前先要做些什么? 在开始调参之前,需要确定方向,所谓方向就是确定了之后,在调参过程中不再更改 1.根据任务需求,结合数据,确定网络结构. 例如对于RNN而言,你的数据是变长还是非变长:输 ...
- c# dll使用注意
1.dll路径最好不要用到中文,会报:尝试读取或写入受保护的内存.这通常指示其他内存已损坏.
- 当xml结构很深时候 可以通过父节点删除子元素
当xml结构很深时候 可以通过父节点删除子元素
- (转)Foundation-性能优化之NSDateFormatter
性能优化之NSDateFormatter 为什么要优化NSDateFormatter? 首先,过度的创建NSDateFormatter用于NSDate与NSString之间转换,会导致App卡顿,打开 ...