1.生命周期&生命周期函数

生命周期:指一个组件从创建->运行->销毁的整个阶段,强调的是一个时间段。

生命周期函数:由vue框架提供的内置函数,会伴随着组件的生命周期,自动按序执行。

即:生命周期强调的是时间段,生命周期函数强调的是时间点

组件生命周期函如下:

1.beforeCreated()处于 初始化事件和生命周期函数 之后, 初始化props、data、methods 之前,此时组建的props、data、methods未被创建,在该函数中不可用。

2.created()处于 初始化props、data、methods 之后,模板结构生成 之前。此时组件的props、data、methods已经创建好,可以调用,不过此时还未进行渲染,不推荐操作DOM。

3.beforeMounted()时间点 将要把内存中编译好的HTML结构渲染到浏览器中,此时浏览器中还没有当前组件的DOM结构。

4.mounted(),此时已经将内存中的HTML结构成功渲染到浏览器,浏览器中已经包含了当前组件的DOM结构。

5.beforeUpdate()在data数据发生改变的时候,会触发该函数,将要 变化后的最新数据重新渲染到组件的模板结构(还没渲染)。

6.updated()已经根据最新数据完成了DOM结构的重新渲染。

7.beforeDestory()将要销毁此组件,还未销毁,组件正常工作。

8.destroyed()组件已经销毁,该组件在浏览器中对应的DOM结构已经完全移除。

用的比较多的是created()与mounted()以及update()。

上述生命周期函数都可以从vue官方的生命周期函数图示中找到,可以通过该图示进一步了解生命周期执行过程:

vue组件的生命周期详解的更多相关文章

  1. Vue js 的生命周期详解

    Vue 实例的生命周期 Vue 实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom→渲染.更新→渲染.卸载等一系列 过程,我们称这是 Vue 的生命周期.通俗说就是 Vue ...

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

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

  3. ASP.NET生命周期详解

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

  4. ASP.NET生命周期详解 [转]

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

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

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

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

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

  7. vue组件生命周期详解

    Vue所有的生命周期钩子自动绑定在this上下文到实例中,因此你可以访问数据,对属性和方法进行运算.这意味着你不能使用箭头函数来定义一个生命周期方法.这是因为箭头函数绑定了父上下文,因此this与你期 ...

  8. Vue生命周期详解

    Vue所有的生命周期钩子自动绑定在this上下文到实例中,因此你可以访问数据,对属性和方法进行运算.这意味着你不能使用箭头函数来定义一个生命周期方法.这是因为箭头函数绑定了父上下文,因此this与你期 ...

  9. 通俗易懂了解Vue组件的生命周期

    1.前言 在使用vue2.0进行日常开发中,我们总有这样的需求,我就想在页面刚一加载出这个表格组件时就发送请求去后台拉取数据,亦或者我想在组件加载前显示个loading图,当组件加载出来就让这个loa ...

随机推荐

  1. offsetof宏---个人笔记

    标准库里面提供的offsetof(t,m)宏,用来计算两个变量在内存中的地址偏移量 #include <stdio.h>//原型: #define offsetof(TYPE, MEMBE ...

  2. Spring之JDBC Template

    时间:2017-2-5 18:16 --Spring对不同持久化技术的支持Spring为各种支持的持久化技术都提供了简单操作的模板和回调.ORM持久化技术:    JDBC:        org.s ...

  3. Spark Ignite踩坑记录

    Ignite spark 踩坑记录 简述 ignite访问数据有两种模式: Thin Jdbc模式: Jdbc 模式和Ignite client模式: shell客户端输出问题,不能输出全列: 针对上 ...

  4. go-Gorm

    软删除 如果模型中有 DeletedAt 字段,它将自动拥有软删除的能力!当执行删除操作时,数据并不会永久的从数据库中删除,而是将 DeletedAt 的值更新为当前时间.

  5. 4种Golang并发操作中常见的死锁情形

    摘要:什么是死锁,在Go的协程里面死锁通常就是永久阻塞了,你拿着我的东西,要我先给你然后再给我,我拿着你的东西又让你先给我,不然就不给你.我俩都这么想,这事就解决不了了. 本文分享自华为云社区< ...

  6. 正整数a、b、c、d满足ab=cd,则a+b+c+d必定为合数。

    正整数a.b.c.d满足ab=cd,则a+b+c+d必定为合数. 证法一:记s=a+b+c+d.如果四个数全为1,s=4,显然是合数.考虑四个数非全1的情形,由对称性,不妨令a>1. 设p是a的 ...

  7. TCP连接中的状态

    1. 正常状态转换 我们用图 3-13 来显示在正常的 TCP 连接的建立与终止过程中,客户与服务器所经历的不同状态.读者可以对照图 3-12 来阅读,使用图 3-12 的状态图来跟踪图 3-13 的 ...

  8. JVM详解(四)——类加载过程

    类加载过程 https://www.cnblogs.com/aqsaycode/p/14885023.html

  9. Spring Cloud Eureka 实践(一)

    Spring Cloud Eureka是Spring Cloud Netflix微服务套件中的一部分,主要在Spring Cloud架构中提供服务注册发现的功能.那么是不是可以尝试在本地搭一个单例Eu ...

  10. MongoDB(3)- Database 数据库相关

    Database MongoDB 将数据记录存储为文档(特别是 BSON 文档) 这些文档在集合中聚集在一起 数据库存储一个或多个文档集合. 在 MongoDB 里面存在数据库的概念,但没有模式 Sh ...