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退出),如下图 ...
随机推荐
- maven之package与install的区别
mvn clean package 先看命令的执行过程 mvn clean install 同样先看执行过程 mvn clean package依次执行了clean.resources.compile ...
- kafka集群部署文档（转载）
原文链接:http://www.cnblogs.com/luotianshuai/p/5206662.html Kafka初识 1.Kafka使用背景 在我们大量使用分布式数据库.分布式计算集群的时候 ...
- Android之线程安全的单例模式，Adapter注意事项之引用传值
线程安全的单例模式单位模式一般写法如下: public static FestivalLab mInstance; private FestivalLab() { } public static Fe ...
- 『Golang』MongoDB在Golang中的使用（mgo包）
有关在Golang中使用mho进行MongoDB操作的最简单的例子.
- Kubernetes集群（概念篇）
Kubernetes介绍 2013年docker诞生,自此一发不可收拾,它的发展如火如荼,作为一个运维如果不会docker,那真的是落伍了. 而2014年出现的kubernetes(又叫k8s)更加炙 ...
- Python3 初识Python
一 Python简介 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为ABC ...
- 最短路径——Dijkstra算法以及二叉堆优化（含证明）
一般最短路径算法习惯性的分为两种:单源最短路径算法和全顶点之间最短路径.前者是计算出从一个点出发,到达所有其余可到达顶点的距离.后者是计算出图中所有点之间的路径距离. 单源最短路径 Dijkstra算 ...
- webmagic 二次开发爬虫 爬取网站图片
webmagic的是一个无须配置.便于二次开发的爬虫框架,它提供简单灵活的API,只需少量代码即可实现一个爬虫. webmagic介绍 编写一个简单的爬虫 webmagic的使用文档:http://w ...
- springmvc文件上传，出现400 的错误问题
遇见的原因是公司系统上的图片上传忽然不好使了,报错400.单独针对这个模块调了好长时间都没解决,后来才发现前几天做过一个excel上传导入的功能... 使用SptingMVC3.1.3 对于文件上传提 ...
- 算法(6)3Sum Closest
kSum问题是一类问题,基本的方法是两个循环,其他一个查找,但是今天碰到了一个超级棘手的问题,是3Sum问题的一个变型 问题:给定一个数组,给定一个整数k,要求找出在数组中找到3个整数,使得这三个整数 ...