首先上图展
<template>
<div id="home">
<p>{{ message }}</p>
</div>
</template>
<script>
export default{
data(){
return{
message:"vuex is very hard"
}
},
beforeCreate(){
console.log('beforeCreate创建前状态');
console.log("el:"+this.$el);//undefined
console.log("data:"+this.$data);//undefined
console.log("message:"+this.message)//undefined
},
created(){
console.log('created创建完毕状态');
console.log("el:"+this.$el);//undefined
console.log("data:"+this.$data);//[object Object]
console.log("message:"+this.message)//vuex is very hard
},
beforeMount(){
console.log('beforeMount挂载前状态');
console.log("el:"+this.$el);//undefined
console.log("data:"+this.$data);//[object Object]
console.log("message:"+this.message)//vuex is very hard
},
mounted(){
console.log('mounted挂载结束状态');
console.log("el:"+this.$el);//[object HTMLDivElement]
console.log("data:"+this.$data);//[object Object]
console.log("message:"+this.message)//vuex is very hard
},
beforeUpdate(){
console.log('beforeUpdate更新前状态');
console.log("el:"+this.$el);
console.log("data:"+this.$data);
console.log("message:"+this.message)
},
updated(){
console.log('updated更新完成状态');
console.log("el:"+this.$el);
console.log("data:"+this.$data);
console.log("message:"+this.message)
},
beforeDestroy(){
console.log('beforeDestroy摧毁前状态');
console.log("el:"+this.$el);
console.log("data:"+this.$data);
console.log("message:"+this.message)
},
destroyed(){
console.log('destroyed');
console.log("el:"+this.$el);
console.log("data:"+this.$data);
console.log("message:"+this.message)
},
}
</script>
主要:
beforecreated:el 和 data 并未初始化
created:完成了 data 数据的初始化,el没有
beforeMount:完成了 data 数据的初始化,el没有
mounted :完成挂载,完成了 el 和 data 初始化
beforecreate : 可以在这加个loading事件
created :在这结束loading,还做一些初始化,实现函数自执行
mounted : 在这发起后端请求,拿回数据,配合路由钩子做一些事情
beforeDestory: 你确认删除XX吗? destoryed :当前组件已被删除,清空相关内容
参考:https://segmentfault.com/a/1190000008010666
vue2.0生命周期详解的更多相关文章
-
ASP.NT运行原理和页面生命周期详解及其应用
ASP.NT运行原理和页面生命周期详解及其应用 1. 下面是我画的一张关于asp.net运行原理和页面生命周期的一张详解图.如果你对具体不太了解,请参照博客园其他帖子.在这里我主要讲解它的实际应用. ...
-
ASP.NET生命周期详解
最近一直在学习ASP.NET MVC的生命周期,发现ASP.NET MVC是建立在ASP.NET Framework基础之上的,所以原来对于ASP.NET WebForm中的很多处理流程,如管道事件等 ...
-
ASP.NET生命周期详解 [转]
最近一直在学习ASP.NET MVC的生命周期,发现ASP.NET MVC是建立在ASP.NET Framework基础之上的,所以原来对于ASP.NET WebForm中的很多处理流程,如管道事件等 ...
-
vue2.0 生命周期 简析
Vue2.0 生命周期钩子函数: <template> <div id='app'> {{message}} </div> </template> va ...
-
ASP.NET生命周期详解(转)
看到好文章需要分享. 最近一直在学习ASP.NET MVC的生命周期,发现ASP.NET MVC是建立在ASP.NET Framework基础之上的,所以原来对于ASP.NET WebForm中的很多 ...
-
React—组件生命周期详解
React—组件生命周期详解 转自 明明的博客 http://blog.csdn.net/slandove/article/details/50748473 (非原创) 版权声明:转载请注明出处,欢 ...
-
vue2.0中router-link详解
vue2.0中router-link详解:https://blog.csdn.net/lhjuejiang/article/details/81082090 在vue2.0中,原来的v-link指令已 ...
-
详解Vue2.0生命周期
网上已经有很多关于vue生命周期的文章,我的这篇文章的由来,其实是我对官网上描述的一句话的思考与理解:“el被新创建的vm.$el替换”,所以文章更多的内容可能是在对vue生命周期中“created ...
-
【转】Java 类的生命周期详解
一. 引 言 最近有位细心的朋友在阅读笔者的文章时,对java类的生命周期问题有一些疑惑,笔者打开百度搜了一下相关的问题,看到网上的资料很少有把这个问题讲明白的,主要是因为目前国内java方面的教材大 ...
随机推荐
-
powershell使用
主要语法点: -match -notmatch -replace -join -split -and -or -xor -not ! +.-.*./.% =.+=.-=.*=./=.%= -eq.-n ...
-
spark配置lzo
spark1.0版本 spark-env.sh中 export SPARK_LIBRARY_PATH=$SPARK_LIBRARY_PATH:/soft/hadoop/lzo/lib/export S ...
-
项目中libevent几个问题
几个问题: .libevent到底用的是select还是iocp,然后是如何突破64限制的 typedef struct fd_set { u_int fd_count; /* how many ar ...
-
记一次帮客户做SEO诊断:新站收录后优化一个月了,排名一直没上去
一.网站问题 新网站建设有一个多月了,一直在优化,但是网站一直没有排名,不知道什么原因.接下来针对这个网站分析一下原因. 二.诊断分析 看一下网站的基础数据,如图: < 可以看出来网站只有一个多 ...
-
Cordova入门系列(三)Cordova插件调用 转发 https://www.cnblogs.com/lishuxue/p/6018416.html
Cordova入门系列(三)Cordova插件调用 版权声明:本文为博主原创文章,转载请注明出处 上一章我们介绍了cordova android项目是如何运行的,这一章我们介绍cordova的核心 ...
-
Mongo 用户管理
开启用户管理 auth = true 在配置文件或者参数中设置为改选项 开启认证服务,注意一点,很多人说在没有设置用户和配置用户之前,应该先不要开启,等设置完用户后再开启该参数,目前在win2008 ...
-
【代码笔记】Web-CSS-CSS 语法
一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
-
【DWM1000】 code 解密8一 TAG接收blink response 信号
在分析这个部分前,目前我看到DWM1000 的资料,data可以分为blink和一般无线数据,后面有内容我们再扩充, 上面我们已经看到接收到blink触发的事件为 case SIG_RX_BLINK ...
-
PHP字符串函数之 sscanf echo print sprintf vsprintf printf vprintf fprintf vfprintf
sscanf – 根据指定格式解析输入的字符 echo – 输出一个或多个字符串 print – 输出字符串 sprintf – 返回格式化字符串 vsprintf – 返回格式化字符串 (参数为数组 ...
-
curl java 模拟http请求
curl java 模拟http请求 直接上代码: public static void main(String args[]) throws Exception { String url = &qu ...