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. MyEclipse 上使用sping+hibernate+mysql

    以下为入门级别代码,高手请务见笑~ 我的MyEclipse 上spring最高版是3.* 而hibernate 最高版本是4.*     在做项目时用的都是最高版,于是代码写好之后调试报了个异常,居然 ...

  2. 解决上传app store卡在正在通过iTunes Store鉴定

    打开终端输入代码即可 cd ~ mv .itmstransporter/ .old_itmstransporter/ "/Applications/Xcode.app/Contents/Ap ...

  3. goroutine 并发之搜索文件内容

    golang并发编程 - 例子解析 February 26, 2013 最近在看<Programming in Go>, 其中关于并发编程写得很不错, 受益非浅, 其中有一些例子是需要多思 ...

  4. 【C#】 引用类型

    [C#] 引用类型 附图和代码为了便于理解引用类型 public static void RefDemo() { RefClass r1 = new RefClass { Name = "r ...

  5. MySQL☞聚合函数/分组函数

    分组函数(聚合函数) 1.count(*/列名): a.*:求出该数据的总条数 select  count(*)  from 表名 b.列名:求出该列中列名不为null的总条数 select  cou ...

  6. Mybatis 异常记录(1): Invalid bound statement (not found)

    错误信息: org.apache.ibatis.binding.BindingException: Invalid bound statement (not found): com.pingan.cr ...

  7. python 面试题： 列表表达式

    [process() for item1 in iterable1 if condition1 for item2 in iterable2 if condition2 For item3 in it ...

  8. Linux IO乱序

    原创翻译,转载请注明出处. 在一些平台,所谓的内存映射I/O在保序执行这方面是没有保障的.在这些平台,驱动写入器负责保证I/O写操作按照预期的顺序写到设备内存映射地址. 代表性的做法是通过读取一个安全 ...

  9. Javascript Array和String的互转换

    Array类可以如下定义: var aValues = new Array(); 如果预先知道数组的长度,可以用参数传递长度 var aValues = new Array(20); -------- ...

  10. 【历史】- Unix时代的开创者Ken Thompson

    自图灵奖诞生以来,其获得者一直都是计算机领域的科学家与学者,而在所有这些界的图灵奖中只有唯一的一届有个例外,那就是Ken Thompson与Dennis M. Ritchie,他们都是计算机软件工程师 ...