Vue生命周期详解

目录

    • 1.beforeCreate
    • 2.created
    • 3.beforeMount
    • 4.mounted
    • 5.beforeUpdate
    • 6.updated
    • 7.beforeUnmount(beforeDestroy)
    • 8.unmounted(destroyed)

在这里插入图片描述

1.beforeCreate

  • 分析
    beforeCreate执行时Vue实例还没有被创建datamethods也没有初始化,还没进行数据观测,所以此时不能访问datamethods
  • 使用场景
    通常用于插件开发中执行初始化任务。

2.created

  • 分析
    Created执行时Vue实例已经被创建,数据观测完成,此时可以调用methods中的函数,也可以访问和修改data中的数据。
  • 使用场景
    各种数据可以使用,常用于异步数据的获取。

3.beforeMount

  • 分析
    beforeMount执行时,虚拟DOM已经生成,模板也已经渲染完成,但还没有挂载到页面上,此时的页面还是旧的页面。
  • 使用场景
    此时可以做一些模板相关的操作或者数据预处理相关的操作。

4.mounted

  • 分析
    mounted执行时已完成DOM的渲染和挂载,页面已经更新
  • 使用场景
    可以访问数据并操作DOM元素

5.beforeUpdate

  • 分析
    beforeUpdate执行时更新的虚拟DOM已经生成,更新的数据已经渲染到了模板中,但还没有挂载到页面上,此时的页面还是旧的页面。
  • 使用场景
    可以获取更新前的各种状态

6.updated

  • 分析
    updated执行时更新的DOM已经渲染并挂载完成,页面已经更新
  • 使用场景
    所有状态都是最新的,可以执行操作,触发组件动画等操作

7.beforeUnmount(beforeDestroy)

  • 分析
    beforeUnmount钩子函数执行时,vue实例已经从运行阶段进入了销毁阶段,此时所有的datamethods、过滤器以及指令等都还可以使用
  • 使用场景
    可用于一些定时器或订阅消息的取消

8.unmounted(destroyed)

  • 分析
    实例完成销毁(只是销毁实例,并不能清除DOM
  • 使用场景
    用于清理与其他实例的连接、解绑全部指令及监听事件

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/477755.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MySQL底层概述—1.InnoDB内存结构

大纲 1.InnoDB引擎架构 2.Buffer Pool 3.Page管理机制之Page页分类 4.Page管理机制之Page页管理 5.Change Buffer 6.Log Buffer 1.InnoDB引擎架构 (1)InnoDB引擎架构图 (2)InnoDB内存结构 (1)InnoDB引擎架构图 下面是InnoDB引擎架构图,主要分为内存结构和磁…

【力扣算法题】双指针-战场上的矛与盾的组合(移动零)(快乐数)

前言 🌟🌟本期讲解关于力扣算法两道双指针题目解析~~~ 🌈感兴趣的小伙伴看一看小编主页:GGBondlctrl-CSDN博客 🔥 你的点赞就是小编不断更新的最大动力 🎆那么…

第三十九篇 ShuffleNet V1、V2模型解析

摘要 ShuffleNet V1 ShuffleNet V1是由旷视科技(Megvii,又称Face)在2017年底提出的一种轻量级卷积神经网络架构。该网络专为移动设备和边缘计算环境设计,旨在以较低的计算资源实现高效的图像分类和其他计算机视觉任务。 特点与…

Springboot系列之:创建Springboot项目,Springboot整合MyBatis-plus

Springboot系列之:创建Springboot项目,Springboot整合MyBatis-plus 一、快速创建Spring boot项目二、项目完整目录三、pom.xml四、application.yaml五、实体类六、mapper七、IService接口八、Service实现类九、配置类十、枚举十一、增删改查测试类十二、…

C++:用红黑树封装map与set-1

文章目录 前言一、STL源码分析二、红黑树的构建三、map与set整体框架的搭建与解析四、如何取出进行比较?1. met与set的数据是不同的2. 取出数据进行比较1)问题发现2)仿函数解决 五、封装插入六、迭代器的实现1. operator* 与operator->2. …

Perforce《2024游戏技术现状报告》Part3:生成式AI、版本控制、CI/CD等游戏技术的未来趋势与应用

游戏开发者一直处于创新前沿。他们的实践、工具和技术受到各行各业的广泛关注,正在改变着组织进行数字创作的方式。 近期,Perforce发布了《2024游戏技术现状报告》,通过收集来自游戏、媒体与娱乐、汽车和制造业等高增长行业的从业者、管理人…

4-SpringCloud整合服务间的调用即负载均衡

springcloud目录: 1.Spring Cloud简介 2.SpringCloud整合eureka注册中心 3.SpringCloud整合服务注册 4.SpringCloud整合服务间的调用即负载均衡 5.SpringCloud整合Feign调用 6.SpringCloud整合config配置中心 7.SpringCloud整合zuul路由网关 我们复制一个yqx-user服…

Elasticsearch客户端在和集群连接时,如何选择特定的节点执行请求的?

大家好,我是锋哥。今天分享关于【Elasticsearch客户端在和集群连接时,如何选择特定的节点执行请求的?】面试题。希望对大家有帮助; Elasticsearch客户端在和集群连接时,如何选择特定的节点执行请求的? 100…

深入浅出,快速安装并了解汇编语言

1.什么是汇编语言 了解汇编语言需要先从了解机器语言开始,在计算机发展的初期阶段,机器语言是计算机直接理解和执行的二进制代码语言,其核心特点包括直接执行性、资源高效性、学习难度大以及平台依赖性。它主要由指令码构成,这些…

2.2_3 纠错编码—海明码

目录 1、海明码的纠错过程 2、海明距离 3、确认检验码位数 4、确定校验码和数据的位置 5、求出校验码的值 6、检错并纠错 方法一 方法二 1、海明码的纠错过程 2、海明距离 两个合法编码(码字)的对应比特取值不同的比特数称为这两个码字的海明距离(码距),一…

1992-2021年 各省市县经过矫正的夜间灯光数据(GNLD、VIIRS)区域汇总:省份、城市、区县面板数据

1992-2021年 各省市县经过矫正的夜间灯光数据(GNLD、VIIRS)区域汇总:省份、城市、区县面板数据 .r.rar https://download.csdn.net/download/2401_84585615/90001905 从1992年至2021年,中国各省份、城市及区县的夜间灯光数据经过…

微信小程序上传微信官方审核流程(1)

1,打开微信开发者工具 2,微信开发者工具右上角有一个上传按钮,点击上传按钮 3,点击完上传按钮会弹出一个上传成功的提示,点击提示框中的确定按钮 4,点击完确定按钮后会显示填写版本好和项目备注 5&#x…

快速获取镜像包的方法

1、当我们需要在无网络的环境中,在Docker环境中安装某个镜像时,需要先下载这个镜像包后,再上传 2、下面以在minio为例 在有网络的电脑中使用使用命令下载 docker pull minio/minio将下载好的tar包保存到指定的目录下 save -o /home/cl/app…

11 —— 打包模式的应用

需求:在开发模式下想让webpack使用style-loader进行css样式的处理;让它把css代码内嵌在js中;在生产模式下提取css代码 —— 判断当前运行命令时所在的环境 方案:借助cross-env全局软件包,设置参数区分打包运行环境 …

docker容器化部署springboot项目

前言 docker安装 下载官网 选择自己的系统 然后安装文档内给的命令按顺序执行即可。设置仓库,安装docker. 一、更换镜像源 一般情况下,docker原本自带的镜像网站不一定连的上,就很容易导致下载镜像失败,因此需要换源. 创建/etc/docker/daemon.json并填入数据…

2024深育杯misc2

题目描述:攻击者远程服务器监听所用的端口是( )?请提交flag,例如端口号为80,则提交Sangfor{80} 附件解压打开是一个raw文件 用volatility3工具查看ip链接信息

UI自动化测试中公认最佳的设计模式-POM

一、概念 什么是POM? POM是PageObjectModule(页面对象模式)的缩写,其目的是为了Web UI测试创建对象库。在这种模式下,应用涉及的每一个页面应该定义为一个单独的类。类中应该包含此页面上的页面元素对象和处理这些元…

L14.【LeetCode笔记】返回倒数第k个节点

目录 1.题目 2.分析 思路 代码 提交结果 1.题目 面试题 02.02. 返回倒数第 k 个节点 实现一种算法,找出单向链表中倒数第 k 个节点。返回该节点的值。 注意:本题相对原题稍作改动 示例: 输入: 1->2->3->4->5 和 …

linux-进程间通信

进程的通信是两个或多个进程实现数据的交互,让不同的进程看到同一份资源,而这份资源是由操作系统创建管理的。如果让其中一个进程来提供的话会破坏该进程的独立性,因为这个进程内部的数据可以被其他进程看到,那这个独立性就遭到了…

基于阿里云服务器部署静态的website

目录 一:创建服务器实例并connect 二:本地文件和服务器share 三:关于IIS服务器的安装预配置 四:设置安全组 五:建站流程 六:关于备案 一:创建服务器实例并connect 创建好的服务器实例在云…