vue的生命周期的过程提供了我们执行自定义逻辑的机会,好好理解它的生命周期,对我们很有帮助。

一、vue实例的生命周期

二、生命周期描述:(参考截图

三、例子

window.vm = new Vue({
el: '#app',
data: {activityTime:'活动时间:5月24日-5月30日'},
beforeCreate:function(){
console.log("beforeCreate创建前")
console.log(this.data) //undefined
console.log(this.$el) //undefined
},
created:function(){
console.log("created已创建")
console.log(this.activityTime) //活动时间:5月24日-5月30日
console.log(this.$el) //undefinded
},
beforeMount:function(){
console.log("beforeMount之前")
console.log(this.activityTime) //活动时间:5月24日-5月30日
console.log(this.$el) //虚拟dom
},
mounted:function(){
console.log("mounted") //。。。有了
console.log(this.activityTime) //真实dom
console.log(this.$el)
},
beforeUpdate:function(){
console.log("beforeUpdate更新前"); },
updated:function(){
console.log("beforeUpdate更新完成");
},
beforeDestroy:function(){
console.log("beforeDestroy销毁前")
console.log(this.activityTime)
console.log(this.$el)
},
destroyed:function(){
console.log("destroyed已销毁")
console.log(this.activityTime)
console.log(this.$el)
} }); 

结果如图:

四、 单个组件声明周期

  1. 初始化组件时,仅执行了beforeCreate/Created/beforeMount/mounted四个钩子函数

  2. 当改变data中定义的变量(响应式变量)时,会执行beforeUpdate/updated钩子函数

  3. 当切换组件(当前组件未缓存)时,会执行beforeDestory/destroyed钩子函数

  4. 初始化和销毁时的生命钩子函数均只会执行一次,beforeUpdate/updated可多次执行

五、父子组件的生命周期  

  1. 仅当子组件完成挂载后,父组件才会挂载

  2. 当子组件完成挂载后,父组件会主动执行一次beforeUpdate/updated钩子函数(仅首次)

  3. 父子组件在data变化中是分别监控的,但是在更新props中的数据是关联的

  4. 销毁父组件时,先将子组件销毁后才会销毁父组件

六、兄弟组件

  1. 组件的初始化(mounted之前)分开进行,挂载是从上到下依次进行

  2. 当没有数据关联时,兄弟组件之间的更新和销毁是互不关联的

七、其他

    1、beforeCreate 此时$el、data 的值都为undefined
       一般可以在这里加上加载事件,向后台获取页面需要的内容

  2、created创建之后,此时可以拿到data的值,但是$el依旧为undefined

     created阶段的ajax请求与mounted请求的区别:前者页面视图未出现,如果请求信息过多,页面会长时间处于白屏状态。

  3、 beforeMount之前,$el的值为“虚拟”的元素节点

  4、 mounted之后,“虚拟”dom节点被真实的dom节点替换,并将其插入到dom树中,于是在触发mounted时,
           可以获取到$el为真实的dom元素();但是它不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染,完毕,可以用 vm.$nextTick()

5、destoryed 清空相关内容

随机推荐

  1. H3 BPM社区:流程开发者的学习交流平台

    企业上市有上市流程,融资扩充有融资流程,项目招投标有招投标流程,部门领导选拔有晋升流程,员工请假休假有请假流程,早起上班梳洗有符合自己习惯的流程--生活处处是流程,流程无处不在.但从信息化建设来说,企 ...

  2. 【leetcode】Intersection of Two Linked Lists

    题目简述: Write a program to find the node at which the intersection of two singly linked lists begins. ...

  3. jQuery Layer mobile 弹出层

    layer mobile是为移动设备(手机.平板等webkit内核浏览器/webview)量身定做的弹层支撑,采用Native JavaScript编写,完全独立于PC版的layer,您需要按照场景选 ...

  4. LinQ 基础

    LinQ全名:Linq to Sql,是一种数据库访问技术 常见的数据库访问技术: 1.ADO.NET 2.Entity Framework  框架 3.LinQ LinQ是高集成化的数据访问类,它会 ...

  5. jQuery类库的设计

    目前为止,jquery是js社区中最活跃.用户最多的前端类库,具有链式操作.兼容性.基于数组的操作.强大的插件机制等特点,也是很多前端入门同学最早接触到的库.但是内部如何实现的,一直吸引着我.因此最近 ...

  6. 【bs4】安装beautifulsoup

    Debian/Ubuntu,install $ apt-get install python-bs4 easy_install/pip $ easy_install beautifulsoup4 $ ...

  7. QM课程03-采购中的质量管理

    QM模块被包含于采购过程的下列决策制定阶段:查询.供应商选择.采购订单.货物订单.收货.收到检查和收货数量的下达. 供应商下达 质量部门为一种被指定的物料下达一个供应商,它可以限制或限定下达的数量.如 ...

  8. web.xml 配置的详解

    http://my.oschina.net/u/1383439/blog/224448 http://blog.csdn.net/guihaijinfen/article/details/836383 ...

  9. sql 时间格式

    在SQL Server数据库中,SQL Server日期时间格式转换字符串可以改变SQL Server日期和时间的格式,是每个SQL数据库用户都应该掌握的.本文我们主要就介绍一下SQL Server日 ...

  10. JavaScript系列----一切皆是对象

    1.判断对象类型 1.1.typeof 运算符 首先要认识到,typepof是一个运算符,其运算需要一个参数,返回值是参数的类型. typeof使用方法 typeof parameter //使用方法 ...