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. 如何在Moodle中显示PPT课件

    Moodle中目前是不直接支持PPT的,所以需要曲线救国: 1.安装 iSpring Free 8版本,免费版,其实是一个PPT的插件,在PPT的工具栏中有显示. 2.打开PPT后,直接在该工具中进行 ...

  2. JavaScript---设计模式简介

    概念 设计模式(Design pattern)是一套被反复使用.思想成熟.经过分类和无数次实战设计经验的总结的.使用设计模式是为了让系统代码可重用.可扩展.可解耦.更容易被人理解且能保证代码的可靠性. ...

  3. C++11中std::move的使用

    std::move is used to indicate that an object t may be "moved from", i.e. allowing the effi ...

  4. django生产环境中部署

    https://www.cnblogs.com/chenice/p/6921727.html 本节内容 uwsgi 介绍 uwsgi安装使用 nginx安装配置 django with nginx 如 ...

  5. 3招搞定APP注册作弊

    在说如何应对之前,易盾先给各位盾友梳理移动端APP可能遇到哪些作弊风险.1. 渠道商刷量,伪造大量的下载量和装机量,但没有新用户注册:2. 对于电商.P2P.外卖等平台,会面临散户或者团队刷子的注册- ...

  6. Git初步

    在多人参与开发的项目中,版本控制工具是必须的,网上有很多不错的教程,能简单使用就ok了,粘几篇教程,方便学习 首先我们要了解一些基本的概念,此处简单描述一下 (1)集中式版本控制系统: CVS.SVN ...

  7. ionic 入口禁止加载其他页面

    .state('memberOrders', { prefetchTemplate: false, url: '/memberOrders', templateUrl: '/MemberOrders' ...

  8. mysql 处理日期格式

    DATE_FORMAT(createTime,'%Y-%m-%d %H:%i:%s') 对应格式: 2018-12-17 17:33:43 DATE_FORMAT()函数所有格式:   以后有需要在自 ...

  9. appium + Python + iOS 滑屏方法（appium版本大于1.5）

    之前一直在搞android的自动化,滑动操作一直都用swipe(),比如: he1 = int(dr.get_window_size()['height'] * 0.8)he2 = int(dr.ge ...

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

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