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关于生命周期和钩子函数的更多相关文章

  1. Vue2.0 探索之路——生命周期和钩子函数的一些理解

    前言 在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周期不甚了解.只知道简单的使用,而不知道为什 ...

  2. Vue2.0 探索之路——生命周期和钩子函数的一些理解 - JS那些事儿

    在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周期不甚了解.只知道简单的使用,而不知道为什么,这 ...

  3. Vue2.0 探索之路——生命周期和钩子函数

    beforecreate :可以在这加个loading事件 created :在这结束loading,还做一些初始化,实现函数自执行 mounted : 在这发起后端请求,拿回数据,配合路由钩子做一些 ...

  4. vue学习之生命周期和钩子函数

    参考文章:Vue2.0 探索之路——生命周期和钩子函数的一些理解 抛出问题: 我们有时候会在几个钩子函数里做一些事情,那么什么时候做,该在哪个函数里做? 生命周期简介 结合代码看el 和 data以及 ...

  5. Vue2.0生命周期和钩子函数的一些理解

    转自:https://segmentfault.com/a/1190000008010666 前言 在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mount ...

  6. Vue2.0 【第二季】第4节 Vue的生命周期(钩子函数)

    目录 Vue2.0 [第二季]第4节 Vue的生命周期(钩子函数) 第4节 Vue的生命周期(钩子函数) Vue2.0 [第二季]第4节 Vue的生命周期(钩子函数) 第4节 Vue的生命周期(钩子函 ...

  7. vue的生命周期(又称钩子函数)----以及vue1.0版本与vue2.0版本生命周期的不同

    vue生命周期 1. vue1.0版本与vue2.0版本生命周期的不同 vue1.0版本生命周期图示 图1  vue1.0版本生命周期 vue1.0版本的生命周期: init 实例创建之前 creat ...

  8. Vue笔记:生命周期和钩子函数

    前言 在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周期不甚了解.只知道简单的使用,而不知道为什 ...

  9. Vue(3)- 安装脚手架、过滤器、生命周期的钩子函数、vue-router基本使用

    一.安装脚手架 1.下载node.js,本文下载版本为node-v8.12.0-x64.msi,一键式安装. 2.安装完成后,打开终端,输入node,可进入node环境(两次ctrl+c退出),如下图 ...

随机推荐

  1. HDU暑假多校第八场J-Taotao Picks Apples

    一.题意 给定一个序列,之后给出若干个修改,修改的内容为在原序列的基础上,将某一位元素的值改成给定的值<每次修改相互独立,不保存修改后的结果>.之后询问,在选择第一位元素的情况下,最长递增 ...

  2. 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 ...

  3. WPF中使用第三方字体选择器

    原文:WPF中使用第三方字体选择器 起因 到WPF的字体可以设置的东西变得非常的多,而却没有提供专用的字体选择对话框,甚至于WinFrom的FontDialog也是不能直接用来设置WPF中的字体.解决 ...

  4. SQL Server中2008及以上 ldf 文件过大的解决方法

    在SQL Server中经常遇到事务日志变大的情况,除了将数据库设置为“自动收缩”外,还可以使用下面的SQL命令进行快速清除数据库中的事务日志,命令如下:  - 第一步:清空日志  ALTER DAT ...

  5. 【JDK配置原创】JDK(JRE)环境变量配置原理 --费元星

    已经配置了很多次jdk了,每次都是安装网上的教程配的,今天突然想了解了解原理了,整理一下! 参考贴( http://blog.csdn.net/wkupaochuan/article/details/ ...

  6. jenkins手动安装插件

    插件下载地址: 搜索:https://plugins.jenkins.io/ 列表:https://updates.jenkins-ci.org/download/plugins/ 打开jenkins ...

  7. 6.1 python+appium元素定位方式(登录app)

    1.0.0     :常见的十种元素定位方式 .driver.find_element_by_id() #id定位 .driver.find_element_by_name() #name定位(已经凉 ...

  8. LAXCUS对数据存储的优化

        LAXCUS兼容行存储(NSM)和列存储(DSM)两种数据模型,实现了混合存储.同时在分布环境里,做到将数据的分发和备份自动处理,这样就不再需要人工干预了.     行存储,为了兼容广大用户对 ...

  9. Docker容器-入门级

    1.1 容器简介 1.1.1 什么是 Linux 容器 Linux容器是与系统其他部分隔离开的一系列进程,从另一个镜像运行,并由该镜像提供支持进程所需的全部文件.容器提供的镜像包含了应用的所有依赖项, ...

  10. Linux 远程主机安全配置

    开启了新的 Linux 服务器后,首要任务是做安全配置. 首先更新: # ubuntu sudo apt-get update # 获取 apt 源的软件列表 sudo apt-get upgrade ...