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退出),如下图 ...
随机推荐
- UVA 1593 Alignment of Code（紫书习题5-1 字符串流）
You are working in a team that writes Incredibly Customizable Programming Codewriter (ICPC) which is ...
- c++ map的使用方法
1.头文件:#include<map> 2.定义:map<typename1,typename2> mp 注:字符串数组只能用string而不能使用char[] 3.访问方式: ...
- 基于Ubuntu Server 16.04 LTS版本安装和部署Django之（三）：设置上传文件夹权限（这里测试用完全共享）
基于Ubuntu Server 16.04 LTS版本安装和部署Django之(一):安装Python3-pip和Django 基于Ubuntu Server 16.04 LTS版本安装和部署Djan ...
- P1078 文化之旅
P1078 文化之旅 题目描述 有一位使者要游历各国,他每到一个国家,都能学到一种文化,但他不愿意学习任何一 种文化超过一次(即如果他学习了某种文化,则他就不能到达其他有这种文化的国家).不 同的国家 ...
- 开源版本 hadoop-2.7.5 + apache-hive-2.1.1 + spark-2.3.0-bin-hadoop2.7整合使用
一,开源软件版本: hadoop版本 : hadoop-2.7.5 hive版本 :apache-hive-2.1.1 spark版本: spark-2.3.0-bin-hadoop2.7 各个版本到 ...
- goroutine 并发之搜索文件内容
golang并发编程 - 例子解析 February 26, 2013 最近在看<Programming in Go>, 其中关于并发编程写得很不错, 受益非浅, 其中有一些例子是需要多思 ...
- 子串查询（二维前缀数组） 2018"百度之星"程序设计大赛 - 资格赛
子串查询 Time Limit: 3500/3000 MS (Java/Others) Memory Limit: 262144/262144 K (Java/Others)Total Subm ...
- Ubuntu下使用Git_5
还欠大家最后一篇Git的学习. Git的下一个内容,标签,标签是为了更方便的参考提交而给他表上通俗易懂的名称 Git可以使用两种标签,轻标签和注解标签,打上的标签是固定的,不能向分支那样可以移动位置, ...
- Tuxedo 通讯方式解析
本节根据tuxedo自带samples的例子,让其运行起来.并通过这个例子,深入的理解tuxedo的通讯方式. 进入tuxedo的安装目录,samples目录下自带了一些例子 [root@localh ...
- 不得不服！Python速度虽然慢，但是它工作效率很高！
写在前面 让我们来讨论一个我最近一直在思考的问题:Python 的性能.顺便说一下,我是 Python 的忠实拥趸,我在各种情况下都会积极尝试使用 Python 来解决问题.大家对 Python 最大 ...