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. Linq中dbSet 的查询

    1.Find:按照关键字的ID号来查询(速度快) 如: ADShiTi aDShiTi = db.ADShiTis.Find(id); 2.FirstOrDefault:根据部分条件查询,显示最前的一 ...

  2. python内置模块[sys,os,os.path,stat]

    python内置模块[sys,os,os.path,stat] 内置模块是python自带功能,在使用内置模块时,需要遵循 先导入在 使用 一.sys 对象 描述 sys.argv 命令行参数获取,返 ...

  3. OpenCV入门：（四：混合两张图片）

    1. 原理 对两张图片使用如下公式可以得到两张图片的混合图片, 其中f0(x),f1(x)分别是图片1和图片2同一位置的像素点. 2. OpenCV中的AddWeight函数 函数和参数说明: ) s ...

  4. result returns more than one elements此种错误，解决

    场景:公司产品开发完成后,接入第三方厂商,在进行接口联调的时候出现此问题.此接口报文中的每一个数据都要进行校验,有些是与已经存入产品数据库中的数据进行对比,看是否存在. 问题:在测试中,有些测试没有问 ...

  5. Python Flask之旅

    <Pyhton Flask之旅> 以前学flask时做的总结,搬运到这里,markdown格式写的有点乱,凑合看吧. 参考博客 http://blog.csdn.net/nunchakus ...

  6. python 正则表达式 (重点) re模块

    京东的注册页面,打开页面我们就看到这些要求输入个人信息的提示.假如我们随意的在手机号码这一栏输入一个11111111111,它会提示我们格式有误.这个功能是怎么实现的呢?假如现在你用python写一段 ...

  7. 51单片机实现外部中断0-F

    #include< reg51.h> #define uint unsigned int #define uchar unsigned char sfr P0M0 = 0x94; sfr ...

  8. Turtle模块，一个超精简但功能齐全的绘图包

    先上官方链接https://docs.python.org/3.3/library/turtle.html 再上一个GitHub上别人做的一个小程序,画小猪佩琦的,里面用到了大量常用的turtle接口 ...

  9. FFT的物理意义(转载)

    文章转载自: http://blog.sina.com.cn/s/blog_640029b301010xkv.html FFT是离散傅立叶变换的快速算法,可以将一个信号变换到频域.有些信号在时域上是很 ...

  10. MVC项目用Windsor注入

    第一步创建controler 注入类 public class ApiControllersInstaller : IWindsorInstaller {  public void Install(I ...