vue2.0生命周期详解

时间:2023-01-29 19:52:16

首先上图展

vue2.0生命周期详解

 <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>

vue2.0生命周期详解

主要:

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生命周期详解的更多相关文章

  1. ASP&period;NT运行原理和页面生命周期详解及其应用

    ASP.NT运行原理和页面生命周期详解及其应用 1. 下面是我画的一张关于asp.net运行原理和页面生命周期的一张详解图.如果你对具体不太了解,请参照博客园其他帖子.在这里我主要讲解它的实际应用.  ...

  2. ASP&period;NET生命周期详解

    最近一直在学习ASP.NET MVC的生命周期,发现ASP.NET MVC是建立在ASP.NET Framework基础之上的,所以原来对于ASP.NET WebForm中的很多处理流程,如管道事件等 ...

  3. ASP&period;NET生命周期详解 &lbrack;转&rsqb;

    最近一直在学习ASP.NET MVC的生命周期,发现ASP.NET MVC是建立在ASP.NET Framework基础之上的,所以原来对于ASP.NET WebForm中的很多处理流程,如管道事件等 ...

  4. vue2&period;0 生命周期 简析

    Vue2.0 生命周期钩子函数: <template> <div id='app'> {{message}} </div> </template> va ...

  5. ASP&period;NET生命周期详解(转)

    看到好文章需要分享. 最近一直在学习ASP.NET MVC的生命周期,发现ASP.NET MVC是建立在ASP.NET Framework基础之上的,所以原来对于ASP.NET WebForm中的很多 ...

  6. React—组件生命周期详解

    React—组件生命周期详解 转自 明明的博客  http://blog.csdn.net/slandove/article/details/50748473 (非原创) 版权声明:转载请注明出处,欢 ...

  7. vue2&period;0中router-link详解

    vue2.0中router-link详解:https://blog.csdn.net/lhjuejiang/article/details/81082090 在vue2.0中,原来的v-link指令已 ...

  8. 详解Vue2&period;0生命周期

    网上已经有很多关于vue生命周期的文章,我的这篇文章的由来,其实是我对官网上描述的一句话的思考与理解:“el被新创建的vm.$el替换”,所以文章更多的内容可能是在对vue生命周期中“created ...

  9. 【转】Java 类的生命周期详解

    一. 引 言 最近有位细心的朋友在阅读笔者的文章时,对java类的生命周期问题有一些疑惑,笔者打开百度搜了一下相关的问题,看到网上的资料很少有把这个问题讲明白的,主要是因为目前国内java方面的教材大 ...

随机推荐

  1. powershell使用

    主要语法点: -match -notmatch -replace -join -split -and -or -xor -not ! +.-.*./.% =.+=.-=.*=./=.%= -eq.-n ...

  2. spark配置lzo

    spark1.0版本 spark-env.sh中 export SPARK_LIBRARY_PATH=$SPARK_LIBRARY_PATH:/soft/hadoop/lzo/lib/export S ...

  3. 项目中libevent几个问题

    几个问题: .libevent到底用的是select还是iocp,然后是如何突破64限制的 typedef struct fd_set { u_int fd_count; /* how many ar ...

  4. 记一次帮客户做SEO诊断:新站收录后优化一个月了,排名一直没上去

    一.网站问题 新网站建设有一个多月了,一直在优化,但是网站一直没有排名,不知道什么原因.接下来针对这个网站分析一下原因. 二.诊断分析 看一下网站的基础数据,如图: < 可以看出来网站只有一个多 ...

  5. Cordova入门系列(三)Cordova插件调用 转发 https&colon;&sol;&sol;www&period;cnblogs&period;com&sol;lishuxue&sol;p&sol;6018416&period;html

    Cordova入门系列(三)Cordova插件调用   版权声明:本文为博主原创文章,转载请注明出处 上一章我们介绍了cordova android项目是如何运行的,这一章我们介绍cordova的核心 ...

  6. Mongo 用户管理

    开启用户管理 auth = true 在配置文件或者参数中设置为改选项 开启认证服务,注意一点,很多人说在没有设置用户和配置用户之前,应该先不要开启,等设置完用户后再开启该参数,目前在win2008 ...

  7. 【代码笔记】Web-CSS-CSS 语法

    一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  8. 【DWM1000】 code 解密8一 TAG接收blink response 信号

    在分析这个部分前,目前我看到DWM1000 的资料,data可以分为blink和一般无线数据,后面有内容我们再扩充, 上面我们已经看到接收到blink触发的事件为 case SIG_RX_BLINK ...

  9. PHP字符串函数之 sscanf echo print sprintf vsprintf printf vprintf fprintf vfprintf

    sscanf – 根据指定格式解析输入的字符 echo – 输出一个或多个字符串 print – 输出字符串 sprintf – 返回格式化字符串 vsprintf – 返回格式化字符串 (参数为数组 ...

  10. curl java 模拟http请求

    curl java 模拟http请求 直接上代码: public static void main(String args[]) throws Exception { String url = &qu ...