VUE 页面生命周期基本知识点

在 Vue.js 中,页面生命周期(更准确地说是组件生命周期)指的是组件从创建到销毁的一系列过程。了解这些生命周期钩子可以帮助我们更好地管理组件的状态和行为。以下是 Vue 组件的主要生命周期钩子:

  1. beforeCreate

    • 在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
    • 此时组件的选项对象还未被创建,eldata 都不存在。
  2. created

    • 在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer),属性和方法的运算,以及 watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。
    • 在这个阶段,可以访问组件的 datacomputed 属性,以及调用 methods 方法,但 DOM 还未挂载,因此无法访问 $elvm.$el
  3. beforeMount

    • 在挂载开始之前被调用:相关的 render 函数首次被调用。
    • 在这个阶段,虚拟 DOM 已经创建,但还未挂载到真实 DOM,可以访问 this.$el(它是一个空的虚拟节点),但内容尚未渲染到页面上。
  4. mounted

    • el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个在内联模板中渲染的元素,当 mounted 被调用时 vm.$el 也在文档内。
    • 此时组件已经渲染到页面上,可以访问 DOM,执行依赖于 DOM 的操作。
  5. beforeUpdate

    • 数据更新时调用,发生在虚拟 DOM 打补丁之前。
    • 在这个阶段,data 中的数据是最新的,但虚拟 DOM 还未更新,所以页面还未渲染最新的数据。
  6. updated

    • 由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。
    • 在这个阶段,虚拟 DOM 已经更新,并且页面也已经渲染最新的数据。但要注意避免在这个钩子中执行过多的操作,因为它可能会引发额外的渲染。
  7. beforeDestroy

    • 实例销毁之前调用。在这一步,实例仍然完全可用。
    • 在这个阶段,组件实例仍然有效,但即将被销毁。你可以在这个钩子中执行一些清理操作,如清除定时器、解绑全局事件、销毁插件对象等。
  8. destroyed

    • Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑,所有的事件监听器会被移除,所有的子实例也都会被销毁。
    • 此时组件已被完全销毁,无法再访问组件实例或 DOM 元素。

需要注意的是,在 Vue 3 中,新增了一个 setup 钩子,它是 beforeCreatecreated 之间的生命周期钩子,用于在组件创建之前设置响应式状态和执行副作用(例如,设置侦听器或计算属性)。但是,由于 setup 是在 beforeCreatecreated 钩子之前调用的,因此在 setup 中无法访问 this。同时,Vue 3 也提供了 Composition API,它提供了一种更灵活的方式来组织和重用逻辑代码。

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

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

相关文章

vue使用element plus组件上传服务器

在Vue项目中使用Element Plus组件上传文件到服务器,你可以使用ElUpload组件。以下是一个简单的示例,展示了如何使用ElUpload组件来上传文件,并将其保存到服务器。 首先,确保你已经安装了Element Plus。 npm install element-plu…

从入门到精通:详解Linux进程管理

前言 在这篇文章中,我将带领大家深入学习和理解Linux系统中的进程管理。无论你是初学者还是有一定经验的开发者,相信这篇文章都会对你有所帮助。我们将详细讲解冯诺依曼体系结构、操作系统概念、进程管理、进程调度、进程状态、环境变量、内存管理以及其…

C语言之函数和函数库以及自己制作静态动态链接库并使用

一:函数的本质 1:C语言为什么会有函数 (1)整个程序分为多个源文件,一个文件分为多个函数,一个函数分成多个语句,这就是整个程序的组织形式。这样的组织好处在于:分化问题、、便于程序…

分布式版本控制工具 git

git 是什么 分布式版本控制工具。github 是代码托管平台。 git 有什么用 保存文件的所有修改记录。使用版本号(sha1 哈希值) 进行区分。随时可浏览历史版本记录。可还原到历史指定版本。对比不同版本的文件差异。 为什么要使用 git 多人协作开发一个大…

SQL 优化

SQL 优化是指通过各种手段提高 SQL 查询的执行效率,减少资源消耗,提高数据库的整体性能。以下是一些详细的 SQL 优化方法,包括索引优化、查询优化、数据库设计优化等。 1. 索引优化 创建适当的索引: 单列索引:在查询中频繁使用的单个列上创建索引。多列索引(复合索引):…

STM32手写超频到128M函数

今天学习了野火的STM32教程学会了如何设置STM32的时钟频率,步骤比较详细,也很容易理解,就是视频教程不能跳着看,只能一节节的看,不然会知识不连贯,造成有些知识不理解,连续着看还是没有什么难度…

docker-file 网络

docker挂载 1.绑定挂载(Bind Mounts):绑定挂载是将主机上的文件或目录挂载到容器中。 docker run -v /host/path:/container/path image_name 2.卷挂载(Volume Mounts):卷挂载将 Docker 数据卷挂载到容器中…

【CTF Web】CTFShow web4 Writeup(SQL注入+PHP+字符型注入)

web4 1 管理员阿呆又失败了&#xff0c;这次一定要堵住漏洞 解法 注意到&#xff1a; <!-- flag in id 1000 -->拦截很多种字符&#xff0c;连 select 也不给用了。 if(preg_match("/or|\-|\\\|\/|\\*|\<|\>|\!|x|hex|\(|\)|\|select/i",$id)){die(&q…

yolov8推理由avi改为mp4

修改\ultralytics-main\ultralytics\engine\predictor.py&#xff0c;即可 # Ultralytics YOLO &#x1f680;, AGPL-3.0 license """ Run prediction on images, videos, directories, globs, YouTube, webcam, streams, etc.Usage - sources:$ yolo modepred…

Android开发-Android开发中的TCP与UDP通信策略的实现

Android 开发中的 TCP 与 UDP 通信策略的实现 1. 前言2. 准备工作3. Kotlin 中 TCP 通信实现客户端代码示例&#xff1a;服务器代码示例&#xff1a; 4. Kotlin 中 UDP 通信实现客户端代码示例&#xff1a;服务器代码示例&#xff1a; 5. TCP 与 UDP 应用场景分析TCP 实现可靠传…

搭建访问阿里云百炼大模型环境

最近这波大降价&#xff0c;还有限时免费&#xff0c;还不赶快试试在线大模型&#xff1f;下面整理访问百炼平台的千问模型方法。 创建RAM子账号并授权 创建RAM子账号 1. “访问控制RAM”入口&#xff08;控制台URL&#xff09; 然后点击进入“RAM管理控制台” 2. 添加用户 …

vue 区分多环境打包

需求&#xff1a;区分不同的环境&#xff08;测试、正式环境&#xff09;&#xff0c;接口文档地址不同&#xff1b; 配置步骤&#xff1a; 1、在根目录下面新建 .env.xxx 文件&#xff08;xxx 根据环境不同配置&#xff09; 文件中一定要配置的参数项为&#xff1a;NODE_ENV…

【Python搞定车载自动化测试】——Python实现CAN总线Bootloader刷写(含Python源码)

系列文章目录 【Python搞定车载自动化测试】系列文章目录汇总 文章目录 系列文章目录&#x1f4af;&#x1f4af;&#x1f4af; 前言&#x1f4af;&#x1f4af;&#x1f4af;一、环境搭建1.软件环境2.硬件环境 二、目录结构三、源码展示1.诊断基础函数方法2.诊断业务函数方法…

python 火焰检测

在日常生活,总是离不开火,有时候我们需要预防火灾发生,但是我们又不可能一直盯着,这时候我们就需要一款程序帮我们盯着,一旦发生火灾从而告知我们,今天就带大家编写这么一款应用。 安装需要的库 pip install opencv-python 代码实现 import cv2 # Library for…

qmt量化教程4----订阅全推数据

文章链接 qmt量化教程4----订阅全推数据 (qq.com) 上次写了订阅单股数据的教程 量化教程3---miniqmt当作第三方库设置&#xff0c;提供源代码 全推就主动推送&#xff0c;当行情有变化就会触发回调函数&#xff0c;推送实时数据&#xff0c;可以理解为数据驱动类型&#xff0…

mysql中使用 mysqldump 实现跨机器备份|数据同步

1.如果同步数据库&#xff0c;必须先创建数据库&#xff1a; mysqldump -h 192.168.1.10 --lock-tablesfalse -uroot -proot db_name | mysql -h127.0.0.1 -uroot -proot db_name2.过滤掉不想要的表(没试过&#xff0c;但是试过转为sql文件的) mysqldump -h 192.168.1.10 --…

vs2019 c++ 函数的返回值是对象的值传递时候,将调用对象的移动构造函数

以前倒没有注意过这个问题。但编译器这么处理也符合移动构造的语义。因为本来函数体内的变量也要离开作用域被销毁回收了。测试如下&#xff1a; 谢谢

实现信号发生控制

1. 信号发生器的基本原理 信号发生器是一种能够产生特定波形和频率的电子设备&#xff0c;常用于模拟信号的产生和测试。 信号发生器的基本原理 信号发生器的工作原理基于不同的技术&#xff0c;但最常见的类型包括模拟信号发生器和数字信号发生器&#xff08;DDS&#xff0…

[SCTF2019]babyre

打开看看还是有花指令 解除后首先pass1是解maze&#xff0c;好像又是三维的 x是25&#xff0c;也就是向下跳五层,注意是立体的 得到 passwd1&#xff1a; ddwwxxssxaxwwaasasyywwdd 接着往下看 有一个加密函数IDA逆向常用宏定义_lodword-CSDN博客 unsigned __int64 __fastca…

primeflex样式库笔记 Display相关的案例

回顾 宽度设置的基本总结 w-full&#xff1a;表示widtdh&#xff1a;100%&#xff1b;占满父容器的宽度。 w-screen&#xff1a;表示占满整个屏幕的宽度。 w-1到w-12&#xff0c;是按百分比划分宽度&#xff0c;数字越大&#xff0c;占据的比例就越大。 w-1rem到w-30rem&…