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. hdu1002 大数相加问题

    这个题对于 几个月前的我简直是噩梦  好在磕磕绊绊终于写出来了 由于自己的问题  还被巨巨嘲讽了 1 1.#include<stdio.h> 2 2.#include<string. ...

  2. 恶意软件开发——内存相关API

    一.前言 Windows操作系统的内存有三种属性,分别为:可读.可写.可执行,并且操作系统将每个进程的内存都隔离开来,当进程运行时,创建一个虚拟的内存空间,系统的内存管理器将虚拟内存空间映射到物理内存 ...

  3. Python实现GPU加速的基本操作

    技术背景 之前写过一篇讲述如何使用pycuda来在Python上写CUDA程序的博客.这个方案的特点在于完全遵循了CUDA程序的写法,只是支持了一些常用函数的接口,如果你需要自己写CUDA算子,那么就 ...

  4. Git使用教程五

    基于ssh协议(推荐) 该方式与前面https方式相比,只是影响github对于用户的身份鉴权方式,对于git的具体操作(如提交本地.添加注释.提交远程等操作)没有任何影响.   生成公私钥对指令(需 ...

  5. ELK学习之Logstash篇

    Logstash在ELK这一整套解决方案中作为数据采集终端,支持对接Kafka.数据库(MySQL.Oracle).文件等等. 而在Logstash内部的数据流转,主要经过三个环节:input -&g ...

  6. Selenium系列(十七) - Web UI 自动化基础实战(4)

    如果你还想从头学起Selenium,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1680176.html 其次,如果你不懂前端基础知识, ...

  7. xxl-job <=2.0.2 反序列化漏洞

    xxl-job <=2.0.2 反序列化漏洞 搭建 https://github.com/xuxueli/xxl-job/releases/tag/2.0.2 下载源码,导入idea,mysql ...

  8. 处理burp log 小脚本

    burp 日志保存 保存的日志格式为 将日志中的数据包 每个数据包保存到一个单独的txt里面 然后可以控制目录放进不同的目录中 #coding=utf-8 import re import os de ...

  9. vue-cli3项目中使用vue-ueditor-wrap

    Vue + UEditor + v-model 双向绑定 一.安装 1 npm i vue-ueditor-wrap 2 # 或者 3 yarn add vue-ueditor-wrap 二.下载文件 ...

  10. vue项目实现文件下载进度条

    平时业务中下载文件方式常见的有俩种: 第一种,直接访问服务器的文件地址,自动下载文件: 第二种 ,服务器返回blob文件流,再对文件流进行处理和下载. 一般小文件适用于第一种下载方案,不占用过多服务器 ...