【Vue2】生命周期——钩子函数

2023-05-16

钩子函数:在一个Vue实例从创建到销毁的过程自动执行的函数。

 1、分析生命周期

1)初始化阶段:

beforeCreate()

生命周期中第一个函数,在该函数执行时Vue实例仅仅完成自身事件绑定和生命周期函数的初始化工作,Vue实例中还没有Data,el,methods相关属性。

created()

生命周期的第二个函数,在该函数执行时Vue实例已经初始化data属性和methods中相关方法,可以在此阶段调取后端数据了

beforeMount()

生命周期的第三个函数,在该函数进行模板编译,生成虚拟dom

mounted()

生命周期的第四个函数,在该函数将数据渲染到页面上,生成真实dom

2)运行阶段

beforeUpdate()

生命周期的第五个函数,数据更新时触发该函数,该函数执行时Vue实例中data数据变化,但页面数据仍为旧数据,即data数据与页面数据不同步

updated()

生命周期的第六个函数,数据更新触发,但时机点位于beforeUpdated后,此时页面数据与Vue实例中data数据能够保持一致。

3)销毁阶段

beforeDestory()

生命周期的第七个函数,该函数执行时,Vue实例中所有数据、methods、component还未销毁

destoryd()

生命周期的第八个函数,该函数执行时,Vue实例彻底销毁

2、钩子函数常见的使用场景

1)推荐在created()中发送请求,对服务端接口进行调用,此时data数据已经创建,可以获取服务端数据对其进行赋值,相比beforeMount()和mounted(),created()能更快获取到服务端数据,减少页面loading 时间;

2)在 mounted()中,Vue将编译好的模板挂在到页面上,此时为真实DOM,可以对DOM进行操作。此时可以做启动定时器、绑定自定义事件、订阅消息等初始化操作。

3)beforeDestory()可进行清除定时器、解绑自定义事件、取消消息订阅等操作。

注意=>生命周期的this指向Vue组件实例或者vm

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

【Vue2】生命周期——钩子函数 的相关文章

  • 浅谈安卓UI设计,android串口工具apk

    lt xml version 61 34 1 0 34 encoding 61 34 utf 8 34 gt lt android support constraint ConstraintLayout xmlns android 61 h
  • 四轴飞行器-基于STM32微控制器(电子入门必看)

    nbsp nbsp nbsp nbsp nbsp nbsp 从开始做微型多旋翼飞行器以来 我经常和一大批有着同样爱好的朋友们互相交流 他们走着我曾经走过的路 也经历着我所经历过的坎坷 无论我在何坛何群 总有朋友追问着很多重复的问题 未能全部
  • 基于stm32cubeMX的平衡小车HAL库+蓝牙遥控+直立环+速度环+转向环 STM32F103C8T6

    基于stm32cubeMX的平衡小车HAL库 蓝牙遥控 直立环 速度环 转向环 一 代码工程链接 我的平衡车代码 HAL库 cubeMX配置 主控stm32f103 程序代码容易移植 建议先看完正文 工程 平衡车工程 PCB 代码程序 蓝牙
  • Java日常学习:运用链栈实现进制转换

    一 简单介绍 今天我就给大家带来java中的链栈实现进制转换的方法 xff0c 该方法也是在学习栈的时候发现的 xff0c 我们都知道在进制转换的时候有很多种方法 xff0c 其中最常用也最容易理解的就是除基倒取余法 xff0c 那么我们先
  • CLion解决中文输出乱码(2022年最新教程)

    CLion是个很好用的IDE xff0c 但是在用CLion写C C 43 43 代码时 xff0c 中文输出会是乱码 xff0c 此前博主也找了很多资料 xff0c 但是网上的教程大多都是脱裤子放屁 xff0c 治标不治本 xff0c 在
  • 【Linux网络编程】TCP并发服务器的实现(IO多路复用select)

    文章目录 一 服务器模型1 1 服务器概念1 2 TCP并发服务器的意义1 3 实现TCP并发服务器的方式 二 使用IO多路复用实现TCP并发服务器优势三 select函数四 TCP并发服务器的构建4 1 创建套接字4 2 填写服务器网络信
  • 树莓派解决cannot currently show the desktop最优法

    最近在搞树莓派前面的步骤都轻轻松松的解决了这个问题卡了我很久 这个是解决之后的效果 xff0c 我使用改分辨率用了很多办法这个办法解决的效率最快 直接在下载好文件的解决 1 将有sd卡的读卡器插入 2 在config txt文件中加入四句话
  • 十、C++中的类 class与struct的区别

    面向对象程序设计 xff0c 需要诸如类和对象这样的概念 C 43 43 支持面向过程 基于对象 面向对象 泛型编程四种 C语言不支持面向对象编程 类是一种将数据和函数组织在一起的方式 一个函数参数过多 xff0c 代码不好维护 xff0c
  • 飞控开发--气压计MS5611

    ms5611简介 xff1a 官方给出的最大分辨率 xff1a 10cm 工作电压 xff1a 1 8v 3 6v 气压 AD 精度 xff1a 24位 工作环境 xff1a xff0d 40 43 85 C xff0c 10 1200mb
  • 如何使用JavaScript将Set转换为Array?

    如何使用JavaScript将Set转换为Array xff1f 下面本篇文章家里给大家介绍一下在JavaScript中将Set转换为Array的方法 xff0c 希望对大家有所帮助 在JavaScript中 xff0c 想要将Set xf
  • 如何在Markdown中插入图片并顺利共享

    使用PicGo 43 GitHub搭建图床 实现便捷的Markdown图片管理 昨天在呕心沥血写 xff08 搬 xff09 完我的第一篇技术分享博文m1 使用 VMware 安装 CentOS7 并部署 k8s 高可用集群之后 xff0c
  • 海康威视网络摄像头sdk的开发(Demo的使用)指南

    如果您是想实现海康sdk包的Demo实例中MFC的分功能 xff0c 那么请慢慢看 xff0c 这篇文章百分之九十九可以帮你实现 提醒 xff1a 内容来自网络和自己实际操作 xff0c 如有问题请联系hww168 64 yeah net
  • Proxy反向代理解决跨域问题

    一 问题的产生 在项目开发过程中遇到了一个问题 xff0c 访问图片与访问其他的数据的服务器不是同一个 xff0c 虽然后台已经将两个服务器合并到一个 xff0c 但是前台配置好后访问就会产生了一个问题 xff0c 具体报错如下 xff1a
  • 什么是枚举【详解】

    本期介绍 x1f356 主要介绍 xff1a 什么是枚举 xff0c 枚举是如何定义 初始化的 xff0c 以及枚举到底如何使用 xff0c 还有枚举这种语法存在的优点有那些 x1f440 文章目录 一 什么是枚举 x1f356 二 枚举类
  • vscode将项目导入远程仓库 git

    1 打开软件 点击第三个图标 远程仓库 点击代码管理右上角三个小点 远程 远程仓库 添加远程存储库 跳出输入框 2 复制git的地址 3 将上一步复制的仓库链接 粘贴进去 回车 4 命名 5 打开命令行 输入下列命令 用户名 邮箱 PS D
  • 深度学习二

    BT神经元为按照误 差逆向传播算法训练的多层前馈神经网络 BT神经网络分为输入层 隐藏层 输出层 输入层一般有数据种类多个神经元 xff0c 接受数据 隐藏层的神经元为根号下隐藏层 输出层加b个 xff0c 输入的每个数据加权和返回数之和为
  • ROS学习(五)

    学习古月 ROS机器人开发实践 一书时 xff0c 在第六章的6 3遇到的问题的总结 在执行将xacro文件转化成urdf的文件格式时 xff0c 执行语句 rosrun xacro xacro py mrobot urdf xacro g
  • 新建Mavlink消息

    1 下载Mavlink生成器 1 1 Git clone 需要在翻墙的网络环境下下载 span class token function git span clone https github com mavlink mavlink git
  • Python从入门到精通11天(lambda匿名函数和map函数的使用)

    lambda匿名函数和map函数的使用 lambda匿名函数map函数lambda与map的联用 lambda匿名函数 匿名函数在计算机编程中是指一类无需定义标识符 xff08 函数名 xff09 的函数或子程序 xff0c lambda函
  • STM32F407单片机移植ADS1115驱动程序

    最近一个工程项目需要使用ADS1115采集电压 xff0c 网上研究了一下 xff0c 测试成功 xff0c 期间走了很多弯路 xff0c 为避免后来的研究者重走我的老路 xff0c 特分享给大家 注 xff1a 网上很多ADS1115驱动

随机推荐

  • Python入门到精通12天(迭代器与生成器)

    迭代器与生成器 迭代器生成器 迭代器 迭代器是可迭代的对象 xff0c 即可以进行遍历的对象 列表 字符串 元组 字典和集合这些都是可迭代的对象 xff0c 都可以进行遍历 迭代器是一种访问序列元素的方式 xff0c 它可以通过next 函
  • C语言从入门到精通第8天(分支结构if、else、switch的使用)

    分支结构if else switch的使用 if语句if else语句if else嵌套if else if else语句switch语句 if语句 语法 xff1a if 表达式 语句 xff1b 如果表达式为真 xff0c 则执行 里面
  • Python入门到精通13天(global和nonlocal关键字的使用)

    global和nonlocal关键字的使用 作用域global关键字的使用nonlocal关键字的使用 作用域 在Python中变量的作用域由其代码块决定 xff0c 在代码块中定义的的变量和函数属于局部作用域 xff1b 在函数中定义的变
  • Python从入门到精通14天(eval、literal_eval、exec函数的使用)

    eval literal eval exec函数的使用 eval函数literal eval函数exec函数三者的区别 eval函数 eval 是Python中的内置函数 xff0c 它可以将一个字符串作为参数 xff0c 并将该字符串作为
  • Python从入门到精通15天(浅拷贝和深拷贝)

    浅拷贝和深拷贝 深浅拷贝概述浅拷贝深拷贝 深浅拷贝概述 在Python中 xff0c 对象是通过引用传递的 xff0c 这意味如果创建了一个对象 xff0c 然后将其赋值给另一个变量 xff0c 那么两个变量将引用同一个对象 xff0c 即
  • C语言从入门到精通第9天(循环结构的使用)

    循环结构的使用 while语句do while语句for语句嵌套循环 循环结构可以重复的执行一段代码块 xff0c 在C语言中提供了三种不同类型的循环结构 xff1a for while和do while while语句 语法 xff1a
  • C语言从入门到精通第10天(break和continue的使用)

    break和continue的使用 break语句continue语句 break和continue是两种控制流程的语句 xff0c 他们只能在循环中被使用 xff0c 用于控制循环的执行 如果在非循环中被使用了则会导致语法的错误 brea
  • C语言从入门到精通第11天(数组的基本操作)

    数组的基本操作 数组的概念一维数组二维数组 数组的概念 在程序设计中 xff0c 为了方便处理数据把具有相同类型的若干变量按有序形式集合在一起 xff0c 这些按序排列的同类数据元素的集合称为数组 在C语言中 xff0c 数组属于构造数据类
  • C语言从入门到精通第12天(函数的定义)

    函数的定义 函数的概念函数的定义函数的参数函数的返回值 函数的概念 在程序设计中 xff0c 为了实现某个功能需要编写多行代码 xff0c 我们每次在使用时都将原来的代码重复编码 xff0c 这样就非常的麻烦 xff0c 而且编程的效率也不
  • C语言从入门到精通第13天(函数的调用)

    函数的调用 无参函数的调用有参函数的调用函数的嵌套调用递归函数的调用函数的声明 函数在定义完以后 xff0c 如果不被调用时不会被执行到的 xff1b 在程序中main函数是主函数 xff0c 是会被自动调用 xff0c C程序有且只有一个
  • 项目实战-外卖自提柜 2. CubeMX + FreeRTOS入门

    项目实战 外卖自提柜 1 项目介绍 协议制定 项目实战 外卖自提柜 2 CubeMX 43 FreeRTOS入门 项目实战 外卖自提柜 3 FreeRTOS主要API的应用 项目实战 外卖自提柜 4 FreeRTOS 堆栈分配 调试技巧 项
  • C语言从入门到精通第14天(局部变量和全局变量)

    局部变量和全局变量 局部变量全局变量 局部变量 简单来说 xff0c 在C语言中的局部变量就是定义在 中的变量 xff0c 他的作用域也在 内 xff0c 他的生命周期随着 结束而结束 例如 xff1a span class token k
  • C语言从入门到精通第15天(C语言预处理)

    C语言预处理 预处理概述宏定义条件编译 预处理概述 在前面我们已经对C语言的基础语法知识有所了解了 xff0c 每次进行程序的编写之前 xff0c 我们会使用 include命令去导入我们的库函数 xff0c 而这种以 号开头的命令称为预处
  • C语言从入门到精通第16天(指针的定义与基本使用)

    指针的定义与基本使用 什么是指针 xff1f 指针变量的定义指针变量的基本使用 什么是指针 xff1f 在使用指针之前我们需要对指针进行初步的了解 xff0c 首先我们要知道什么是指针 xff1f 通过前面的学习我们已经知道了内存的存储方式
  • 作为一个大学生你应该知道的事情

    作为一个大学生你应该知道的事情 大学生毕业去向 今天 xff0c 我们不写技术 xff0c 来谈一谈大学生的毕业现状 xff1a 以下内容为本人的一些观点和看法 xff0c 仅限于沟通交流 大学生毕业去向 大学生的毕业去向大致可以分为 xf
  • C语言从入门到精通第17天(指针和数组联用)

    指针和数组联用 不同类型指针变量之间的区别数组的指针指针数组 不同类型指针变量之间的区别 在了解数组和指针联用之前 xff0c 我们先对指针变量进行补充 我们对比一下int p1和char p2的区别 xff1f 相同点 xff1a 都是指
  • 使用 Keil uVision 和 STM32CubeMX 对 STM32F103C8 进行编程

    采用ARM Cortex M架构的STM32微控制器因其特性 成本和性能而在许多应用中得到广泛应用 在之前的教程中 xff0c 我们已经使用Arduino IDE编程了STM32F103C8 使用Arduino IDE编程STM32很简单
  • 适用于 STM32F103C8 的 FreeRTOS,STM32的多任务同时进行

    概述 xff1a 适用于 STM32F103C8 的 FreeRTOS STM32F103C 是一款ARM Cortex M3 处理器 我们可以在 Arduino IDE 中使用适用于 STM32F103C8 的 FreeRTOS 我们也可
  • PLC为什么会被上位机取代

    随着我们进入高速发展的轨道 xff0c 许多工厂都已经完成了自动化流水线生产的打造 我们可以看到很多大厂已经搭建了智能生产线 所以越来越多的plc工程师开始感觉到 xff0c 只会传统的plc控制 xff0c 已经无法满足公司的企业发展业务
  • 【Vue2】生命周期——钩子函数

    钩子函数 xff1a 在一个Vue实例从创建到销毁的过程自动执行的函数 1 分析生命周期 1 xff09 初始化阶段 xff1a beforeCreate xff08 xff09 生命周期中第一个函数 xff0c 在该函数执行时Vue实例仅