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. 解析一个HTML字符串

    存在问题 来自用户输入,一个文件或一个网站的HTML字符串,你可能需要对它进行解析并取其内容,或校验其格式是否完整,或想修改它.怎么办?jsonu能够帮你轻松解决这些问题 解决方法 使用静态Jsoup ...

  2. 连接共享打印机失败错误代码0x80070035

    局域网内共享打印机非常方便,但是在连接中经常遇到问题,其中出现错误代码0x80070035的概率非常之高! 1.必须确保有关打印功能的相关服务都处于自动启动状态,重点检查TCP/IP NetBIOS ...

  3. [SWMM]出现问题及解决

    1,节点顺序 [错误]:如下图,在SWMM软件中普通节点到出水口的连接线不能正常连接,提示找不到出水口节点,但在inp文件中是存在的! [解决]:需要先写入点节点再写入线节点,即先写入[JUNCTIO ...

  4. tar.gz 文件解压

    tar.gz 文件解压 解压缩 file.tar.gz 的过程中出现如下所示问题: tar: 它似乎不像是一个 tar 归档文件 tar: 跳转到下一个头 tar: 由于前次错误,将以上次的错误状态退 ...

  5. Java异常与异常处理

    异常体系结构 1.所有异常都继承于Throwable类,其下有两大子类: (1)Error类:错误,一般编程人员不太接触,如虚拟机错误.线程死锁.硬伤:使程序崩溃 (2)Exception类:异常,编 ...

  6. centos7 wget安装Tomcat7

    2021-07-15 1.环境介绍 操作系统:centos7 jdk版本:jdk1.8.0.211 tomcat版本:tomcat7.0.109 2. 检查系统中是否已经安装 jdk ,如未安装, 请 ...

  7. python 动图gif合成与分解

    合成 #!/usr/bin/env python3 # -*- coding: utf-8 -*- import os import sys import imageio def main(imgs_ ...

  8. Java程序中使用Spire Jar包报java.lang.NoSuchMethodError类型错误的解决方法

    Jar包功能概述 使用Spire系列的Jar包可以操作Word.Excel.PPT.PDF.Barcode等格式的文件,分别对应使用的jar包是Spire.Doc for Java.Spire.XLS ...

  9. 一、自动化监控利器-Zabbix

    目录 1. 监控的作用 1.1 为何需要监控系统 1.2 监控系统的实现 1.3 常用的监控软件 2. Zabbix简介 2.1 选择Zabbix的理由 2.2 Zabbix的功能特性 3. Zabb ...

  10. Appium问题解决方案(7)- Could not find 'adb.exe' in PATH. Please set the ANDROID_HOME environment variable with the Android SDK root directory path

    背景:运行代码提示找不到ADB An unknown server-side error occurred while processing the command. Original error: ...