vue的created和mounted区别

在Vue.js中,created和mounted的核心区别在于调用时机和DOM可访问性‌:created钩子在组件实例创建后、DOM挂载前调用,适用于数据初始化;mounted钩子在DOM挂载后调用,支持DOM操作。‌‌

‌调用时机与核心能力对比‌

‌created钩子‌。

触发时机:组件实例已创建完成,数据观测(data)、计算属性(computed)、方法(methods)等已初始化,但模板尚未编译,‌DOM元素($el)未生成‌。‌‌

典型用途:初始化非DOM相关数据(如API请求)、设置定时器或事件监听等。‌‌

‌mounted钩子‌。

触发时机:组件模板已渲染为真实DOM节点,‌可通过 e l 或 el或 elrefs操作DOM‌。‌‌

典型用途:初始化依赖DOM的第三方库(如图表、地图)、动态修改DOM结构、访问子组件等。‌‌

‌可访问属性对比‌

功能 created mounted
访问data数据 ✅ ✅
操作DOM ❌ ✅
使用$refs引用元素 ❌ ✅
$el属性可用性 ❌ ✅
‌使用场景建议‌

‌优先使用created的场景‌:
初始化数据(如通过API获取初始列表)。‌‌
设置非DOM交互的逻辑(如定时任务、全局事件总线监听)。‌‌
‌必须使用mounted的场景‌:
需要操作DOM元素(如调整元素尺寸、绑定滚动事件)。‌‌
初始化依赖DOM的插件(如ECharts图表渲染)。‌‌

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

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

相关文章

MySQL 8.0 OCP 英文题库解析(十四)

Oracle 为庆祝 MySQL 30 周年,截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始,将英文题库免费公布出来,并进行解析,帮助大家在一个月之内轻松通过OCP认证。 本期公布试题121~130 试题1…

【HarmonyOS 5】拍摄美化开发实践介绍以及详细案例

以下是 HarmonyOS 5 拍摄美化功能的简洁介绍,整合核心能力与技术亮点: 一、AI 影像创新 ‌AI 魔法移图‌ 系统级图像分层技术实现人物/物体自由拖拽、缩放与复制,突破传统构图限制。自动分离主体与背景,一键生成错位创意照&…

【Java多线程从青铜到王者】懒汉模式的优化(九)

懒汉模式的问题 我们看上述的代码,当第一次调用getIntance的时候,intance为null,就会进入if里面,创建出实例,当不是第一次调用的时候,此时的intandce不是null,不进入循环,直接return…

SCI期刊查重参考文献会被查重吗?

查重的时候,参考文献不会被查重。 不管中文还是英文查重系统里一般都有排除参考文献的设置。 比如英文查重系统iThenticate 的排除文献的设置如下: 在iThenticate在线报告界面的右下角点击“漏斗”图标(Filter), ✔…

OpenLayers 获取地图状态

注:当前使用的是 ol 5.3.0 版本,天地图使用的key请到天地图官网申请,并替换为自己的key 地图状态信息包括中心点、当前缩放级别、比例尺以及当前鼠标移动位置信息等,在WebGIS开发中,地图状态可以方便快捷的向用户展示基…

JxBrowser 8.8.0 版本发布啦!

一次调用即可下载文件精准清除浏览数据右键点击位置检测获取元素在视口中的位置 🔗 点击此处了解更多详情。 🆓 获取 30 天免费试用。

React 中的TypeScript开发范式

在 TypeScript 中使用 React 可以提高代码的可维护性、可读性和可靠性。TypeScript 提供了静态类型检查和丰富的类型系统,这些功能在 React 开发中非常有用。下面详细介绍如何在 React 项目中使用 TypeScript,并结合泛型和 infer 来定义类型。 1. 项目初…

72道Nginx高频题整理(附答案背诵版)

1. 简述什么是Nginx ? Nginx 是一个开源的高性能HTTP和反向代理服务器,也能够用作IMAP/POP3/SMTP代理服务器。它最初由Igor Sysoev为俄罗斯的一个大型网站Rambler开发,并在2004年首次公开发布。Nginx被设计用来解决C10k问题,即同…

AI时代,数据分析师如何成为不可替代的个体

在数据爆炸的 AI 时代,AI工具正以惊人的速度重塑数据分析行业,数据分析师的工作方式正在经历一场前所未有的变革。数据分析师又该如何破局,让自己不被AI取代呢? 一、AI工具对重复性工作的彻底解构 如以往我们需要花几天写一份数…

DockerHub与私有镜像仓库在容器化中的应用与管理

哈喽,大家好,我是左手python! Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库,用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…

Kafka入门-Broker以及文件存储机制

Kafka Broker Broker实际上就是kafka实例,每一个节点都是独立的Kafka服务器。 Zookeeper中存储的Kafka信息 节点的服役以及退役 服役 首先要重新建立一台全新的服务器105,并且在服务器中安装JDK、Zookeeper、以及Kafka。配置好基础的信息之后&#x…

dexcap升级版之DexWild——面向户外环境的灵巧手交互策略:人类和机器人演示协同训练(人类直接带上动捕手套采集数据)

前言 截止到25年6.6日,在没动我司『七月在线』南京、武汉团队的机器的前提下,长沙这边所需的前几个开发设备都已到齐——机械臂、宇树g1 edu、VR、吊架 ​长沙团队必须尽快追上南京步伐 加速前进 如上篇文章所说的, 为尽快 让近期新招的新同…

【基于阿里云搭建数据仓库(离线)】使用UDTF时出现报错“FlatEventUDTF cannot be resolved”

目录 问题: 可能的原因有: 解决方法: 问题: 已经将包含第三方依赖的jar包上传到dataworks,并且成功注册函数,但是还是报错:“FlatEventUDTF cannot be resolved”,如下&#xff1a…

06 Deep learning神经网络编程基础 激活函数 --吴恩达

深度学习激活函数详解 一、核心作用 引入非线性:使神经网络可学习复杂模式控制输出范围:如Sigmoid将输出限制在(0,1)梯度传递:影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +

【LC实战派】小智固件编译

这篇写给立创吴总,是节前答应他配合git代码的说明;也给所有对小智感兴趣的小伙伴。 请多提意见,让这份文档更有价值 - 第一当然是拉取源码 - git clone https://github.com/78/xiaozhi-esp32.git 完成后,先查看固件中实际的…

有没有 MariaDB 5.5.56 对应 MySQL CONNECTION_CONTROL 插件

有没有 MariaDB 对应 MySQL CONNECTION_CONTROL 插件 背景 写这篇文章的目的是因为昨晚半夜突然被call起来,有一套系统的mysql数据库启动失败了。尝试了重启服务器也不行。让我协助排查一下问题出在哪。 分析过程 一开始拿到服务器IP地址,就去数据库…

初学 pytest 记录

安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…

【LeetCode】算法详解#6 ---除自身以外数组的乘积

1.题目介绍 给定一个整数数组 nums,返回 数组 answer ,其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法,且在 O…

Kubernetes 节点自动伸缩(Cluster Autoscaler)原理与实践

在 Kubernetes 集群中,如何在保障应用高可用的同时有效地管理资源,一直是运维人员和开发者关注的重点。随着微服务架构的普及,集群内各个服务的负载波动日趋明显,传统的手动扩缩容方式已无法满足实时性和弹性需求。 Cluster Auto…

LLMs 系列科普文(11)

目前我们已经介绍了大语言模型训练的两个主要阶段。第一阶段被称为预训练阶段,主要是基于互联网文档进行训练。当你用互联网文档训练一个语言模型时,得到的就是所谓的 base 模型,它本质上就是一个互联网文档模拟器,我们发现这是个…