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退出),如下图 ...
随机推荐
- HDU暑假多校第八场J-Taotao Picks Apples
一.题意 给定一个序列,之后给出若干个修改,修改的内容为在原序列的基础上,将某一位元素的值改成给定的值<每次修改相互独立,不保存修改后的结果>.之后询问,在选择第一位元素的情况下,最长递增 ...
- ABAP CDS ON HANA-(12)ODATA Service
Create a CDS view and we have the view type as ‘BASIC’ view To publish this as oData, add the annota ...
- WPF中使用第三方字体选择器
原文:WPF中使用第三方字体选择器 起因 到WPF的字体可以设置的东西变得非常的多,而却没有提供专用的字体选择对话框,甚至于WinFrom的FontDialog也是不能直接用来设置WPF中的字体.解决 ...
- SQL Server中2008及以上 ldf 文件过大的解决方法
在SQL Server中经常遇到事务日志变大的情况,除了将数据库设置为“自动收缩”外,还可以使用下面的SQL命令进行快速清除数据库中的事务日志,命令如下: - 第一步:清空日志 ALTER DAT ...
- 【JDK配置原创】JDK（JRE）环境变量配置原理 --费元星
已经配置了很多次jdk了,每次都是安装网上的教程配的,今天突然想了解了解原理了,整理一下! 参考贴( http://blog.csdn.net/wkupaochuan/article/details/ ...
- jenkins手动安装插件
插件下载地址: 搜索:https://plugins.jenkins.io/ 列表:https://updates.jenkins-ci.org/download/plugins/ 打开jenkins ...
- 6.1 python+appium元素定位方式（登录app）
1.0.0 :常见的十种元素定位方式 .driver.find_element_by_id() #id定位 .driver.find_element_by_name() #name定位(已经凉 ...
- LAXCUS对数据存储的优化
LAXCUS兼容行存储(NSM)和列存储(DSM)两种数据模型,实现了混合存储.同时在分布环境里,做到将数据的分发和备份自动处理,这样就不再需要人工干预了. 行存储,为了兼容广大用户对 ...
- Docker容器-入门级
1.1 容器简介 1.1.1 什么是 Linux 容器 Linux容器是与系统其他部分隔离开的一系列进程,从另一个镜像运行,并由该镜像提供支持进程所需的全部文件.容器提供的镜像包含了应用的所有依赖项, ...
- Linux 远程主机安全配置
开启了新的 Linux 服务器后,首要任务是做安全配置. 首先更新: # ubuntu sudo apt-get update # 获取 apt 源的软件列表 sudo apt-get upgrade ...