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. JOI2017 春季合宿:Railway Trip

    自己的AC做法似乎离正解偏了十万八千里而且复杂了不少--不管怎样还是记录下来吧. 题意: 题目链接: JOISC2017 F - AtCoder JOISC2017 F - LOJ \(N\)个车站排 ...

  2. Linux(CentOS)安装Node.JS

    源码安装 比使用yum安装灵活 1.创建目录 cd /opt mkdir program cd program 2.下载安装包 wget https://nodejs.org/dist/v8.12.0 ...

  3. 新手入门Sqlalchemy

    此文已由作者尤炳棋授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 入职考拉半年多,一直在从事KLQA平台的开发,KLQA平台后端是用基于python的flask框架搭建的.F ...

  4. Borland和Micorsoft的对话(转载自月光软件网)

      Borland与Microsoft关于Delphi的对话 Bear 1.Delphi较贵  一套Delphi的价格大约相当于两套Visual Studio  ------------------- ...

  5. UIButton内部子控件自定义布局-“UIEdgeInsets”

    UIButton UIButton做frame动画时,不响应点击 在一个View内部加入几个按钮,然后改变这个view的frame来做动画,但是按钮不响应点击事件. 问题代码 __block CGRe ...

  6. 6.0 实现app登录

    1.0.0:学习ui自动化准备工作 待测app,我这里有准备两个apk,这两个都是我曾经做过的项目,后续的文章都是基于这两个app! 链接:https://pan.baidu.com/s/1I0vR9 ...

  7. sed-awk命令详解

      第2章 ***********sed***********. 1目  录 2.1 -------sed命令小结及小结图---- 1 2.2 -------第几行---------- 2 2.3 - ...

  8. Spark实战练习01--XML数据处理

    一.要求 将XML中的account_number.model数据提取出来,并以account_number:model格式存储 1.XML文件数据格式 <activations> < ...

  9. [译]如何比较同一分支上的不同commit的代码区别?

    原文来源:https://stackoverflow.com/questions/3338126/how-do-i-diff-the-same-file-between-two-different-c ...

  10. winform timer时间间隔小于执行时间

    如果SetTimer的时间间隔为t,其响应事件OnTimer代码执行一遍的时间为T,且T>t.这样,一次未执行完毕,下一次定时到,这时候程序会如何执行? 可能的情况:1.丢弃还未执行的代码,开始 ...