当前位置：首页 > news >正文

GuLi商城-前端基础Vue-生命周期和钩子函数

news 2025/11/4 3:25:52

下图展示了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它

的参考价值会越来越高。

VUE 的生命周期指的是组件在创建、运行和销毁过程中所经历的一系列事件，通过这些事件可以

让开发者在不同阶段进行相应的逻辑处理。VUE 组件的生命周期分为 8 个阶段：

beforeCreate：组件实例刚被创建，但是数据还未初始化。在这个阶段，无法访问到 data 和 methods 等组件属性。
created：组件的数据已经初始化完成，但是 DOM 元素还未生成。可以进行一些异步操作，如发送 AJAX 请求获取数据等。
beforeMount：组件即将被挂载到页面上。在这个阶段，所有的模板和组件都已经编译成 render 函数，并准备好渲染。
mounted：组件已经挂载到页面上，此时可以访问到组件的 DOM 元素。可以进行一些需要访问 DOM 元素的操作，如使用第三方插件等。
beforeUpdate：组件更新之前被调用，在此时可以对组件进行更新前的状态和数据进行处理。
updated：组件更新完毕后被调用。在此阶段中不能再更新组件的数据，否则会导致死循环。
beforeDestroy：组件即将被销毁，在此时可以进行一些清理工作，如清除定时器、解绑事件等。
destroyed：组件已经被销毁，此时所有的事件监听和子组件都已经被移除。

掌握 VUE 组件的生命周期可以帮助开发者更好地理解组件的运行机制，在不同阶段进行相应的逻

辑处理，从而实现更加灵活、高效的组件开发。

Vue到底是什么？优缺点是什么？ - 知乎

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><div id="app"><span id="num">{{num}}</span><button @click="num++">赞！</button><h2>{{name}}，有{{num}}个人点赞</h2></div><script src="../node_modules/vue/dist/vue.js"></script><script>let app = new Vue({el: "#app",data: {name: "张三",num: 100},methods: {show() {return this.name;},add() {this.num++;}},beforeCreate() {console.log("=========beforeCreate=============");console.log("数据模型未加载：" + this.name, this.num);console.log("方法未加载：" + this.show());console.log("html模板未加载：" + document.getElementById("num"));},created: function () {console.log("=========created=============");console.log("数据模型已加载：" + this.name, this.num);console.log("方法已加载：" + this.show());console.log("html模板已加载：" + document.getElementById("num"));console.log("html模板未渲染：" + document.getElementById("num").innerText);},beforeMount() {console.log("=========beforeMount=============");console.log("html模板未渲染：" + document.getElementById("num").innerText);},mounted() {console.log("=========mounted=============");console.log("html模板已渲染：" + document.getElementById("num").innerText);},beforeUpdate() {console.log("=========beforeUpdate=============");console.log("数据模型已更新：" + this.num);console.log("html模板未更新：" + document.getElementById("num").innerText);},updated() {console.log("=========updated=============");console.log("数据模型已更新：" + this.num);console.log("html模板已更新：" + document.getElementById("num").innerText);}});</script>
</body></html>

GuLi商城-前端基础Vue-生命周期和钩子函数

下图展示了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。 VUE 的生命周期指的是组件在创建、运行和销毁过程中所经历的一系列事件，通过这些事件可以让开发者在不同阶段进行相应的…...

编程日记 2023/8/20 7:20:11

输入输出+暴力模拟入门：魔法之树、染色の树、矩阵、字母加密、玫瑰鸭

秋招实习刷题网站推荐：codefun2000.com，还有题解博客：blog.codefun2000.com/。以下内容都是来自塔子哥的~ 输入输出 2023.04.15-春招-第三题-魔法之树 //#include<bits/stdc.h> #include<vector> #include<iostream>usin…...

编程日记 2023/8/20 7:19:09

Kubernetes的演变：从etcd到分布式SQL的过渡

DevRel领域专家Denis Magda表示，他偶然发现了一篇解释如何用PostgreSQL无缝替换etcd的文章。该文章指出，Kine项目作为外部etcd端点，可以将Kubernetes etcd请求转换为底层关系数据库的SQL查询。受到这种方法的启发，Magda决定进一步…...

编程日记 2023/8/20 7:18:08

29、简单通过git把项目远程提交到gitee

简单通过git把项目远程提交到gitee 1、在gitee上创建一个仓库 2、在要提交的项目文件夹打开git 输入 git init 初始化git 然后设置下用户名和邮箱 git config --global user.name “username” git config --global user.email “yourEmail” 因为我是要把文件简单提交到…...

编程日记 2023/8/20 7:17:06

元宇宙之应用（04）沉浸式游戏

在数字科技迅猛发展的今天，元宇宙的概念正逐渐从科幻走向现实，重新定义了人们与虚拟世界的交互方式。在这一概念的引领下，"沉浸式游戏" 蓬勃发展，为游戏体验带来了前所未有的深度和广度。那么，为什么沉浸式游…...

编程日记 2023/8/20 7:16:06

浙大数据结构第八周之08-图7 公路村村通

题目详情： 现有村落间道路的统计数据表中，列出了有可能建设成标准公路的若干条道路的成本，求使每个村落都有公路连通所需要的最低成本。输入格式: 输入数据包括城镇数目正整数N（≤1000）和候选道路数目M&#xff08…...

编程日记 2023/8/20 7:15:04

SpringBoot 解决跨域问题

同源策略（CORS）：浏览器在解析发送的请求时，要求浏览器的路径与发送的请求的路径必须满足三个要求，即请求的协议、域名、端口号都相同，满足同源策略，才可以访问服务器，否则&#xff0…...

编程日记 2023/8/20 7:14:03

2023 年牛客多校第十场题解

C Multiplication 题意：定义 k k k-shift 数是满足 k x y ‾ y x ‾ k\overline{xy}\overline{yx} kxyyx 的数字。给定 k k k，求最大不超过 n n n 的 k k k-shift 数。 1 ≤ n ≤ 1 0 100 1 \le n \le 10^{100} 1≤n≤10100， 2 ≤…...

编程日记 2023/8/20 7:13:01

韦东山老师 RTOS 入门课程（一）RTOS 介绍，熟悉裸机的汇编逻辑

韦东山老师 RTOS 入门课程课程链接：韦东山直播公开课：RTOS实战项目之实现多任务系统第1节：裸机程序框架和缺陷_哔哩哔哩_bilibili RTOS 介绍裸机：固定顺序执行。中断：可以一直专心做循环里的事情，直…...

编程日记 2023/8/20 7:12:00

WebRTC | SDP详解

目录一、SDP标准规范 1. SDP结构 2. SDP内容及type类型二、WebRTC中的SDP结构 1. 媒体信息描述 （1）SDP中媒体信息格式 i. “artpmap”属性 ii. “afmtp”属性 （2）SSRC与CNAME （3）举个例子 &…...

编程日记 2023/8/20 7:10:59

Springboot 实践（9）springboot集成Oauth2.0授权包，5个接口文件配置详解

前文讲解实现了spring boot集成Oauth2.0，实现了授权服务器和资源服务器的搭建，并通过浏览器和postman测试，获取到了授权码，用携带授权码的URL能够争取范文到资源。本文详细讲解spring boot集成Oauth2.0的几个重要文件接口&#…...

编程日记 2023/8/20 7:09:56

【高频面试题】消息中间件

文章目录 1、RabbitMQ1.1 RabbitMQ-如何保证消息不丢失1.2 RabbitMQ消息的重复消费问题如何解决的1.3 RabbitMQ中死信交换机 ? (RabbitMQ延迟队列有了解过嘛)1.4 RabbitMQ如果有100万消息堆积在MQ , 如何解决(消息堆积怎么解决)1.5 RabbitMQ的高可用机制有了解过嘛 2、Kafka2.…...

编程日记 2023/8/20 7:07:54

物联网智慧安防实训综合实训基地建设方案

一、系统概述物联网智慧安防实训综合实训基地是一个为学生提供综合实践、培养技能的场所，专注于物联网技术与智慧安防应用的培训和实训。通过物联网智慧安防实训综合实训基地的建设和运营，学生可以在真实的环境中进行实践训练，提高其物联网技…...

编程日记 2023/8/20 7:06:53

openGauss学习笔记-44 openGauss 高级数据管理-存储过程

文章目录 openGauss学习笔记-44 openGauss 高级数据管理-存储过程44.1 语法格式44.2 参数说明44.3 示例 openGauss学习笔记-44 openGauss 高级数据管理-存储过程存储过程是能够完成特定功能的SQL语句集。用户可以进行反复调用，从而减少SQL语句的重复编写数量&…...

编程日记 2023/8/20 7:05:50

【Linux】进程信号篇Ⅲ：可重入函数、volatile关键字、SIGCHLD信号

信号Ⅲ 🔗 接上篇七、可重入函数八、volatile 关键字九、SIGCHLD 信号 🔗 接上篇 👉🔗进程信号篇Ⅰ：信号的产生（signal、kill、raise、abort、alarm）、信号的保存（core dump&#x…...

编程日记 2023/8/20 7:04:48

排序算法：冒泡排序

冒泡排序是入门级的算法，但也有一些有趣的玩法。通常来说，冒泡排序有三种写法： 一边比较一边向后两两交换，将最大值 / 最小值冒泡到最后一位；经过优化的写法：使用一个变量记录当前轮次的比较是否发生过交换…...

编程日记 2023/8/20 7:03:46

Spring事件监听源码解析

spring事件监听机制离不开容器IOC特性提供的支持，比如容器会自动创建事件发布器，自动识别用户注册的监听器并进行管理，在特定的事件发布后会找到对应的事件监听器并对其监听方法进行回调。Spring帮助用户屏蔽了关于事件监听机制背后的很多细节…...

编程日记 2023/8/20 7:02:42

Cpp学习——list的模拟实现

目录一，实现list所需要包含的三个类二，三个类的实现 1.list_node 2.list类 3.iterator_list类三，功能实现 1.list类里的push_back() 2.iterator类里的运算符重载 3，list类里面的功能函数 1.insert（&#xff…...

编程日记 2023/8/20 7:01:41

工具推荐：Chat2DB一款开源免费的多数据库客户端工具

文章首发地址 Chat2DB是一款开源免费的多数据库客户端工具，适用于Windows和Mac操作系统，可在本地安装使用，也可以部署到服务器端并通过Web页面进行访问。相较于传统的数据库客户端软件如Navicat、DBeaver，Chat2DB具备了与AIGC…...

编程日记 2023/8/20 7:00:40

龙虎榜——20250610

上证指数放量收阴线，个股多数下跌，盘中受消息影响大幅波动。深证指数放量收阴线形成顶分型，指数短线有调整的需求，大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技代表标的：御银股份、雄帝科技驱动…...

编程新知 2025/11/3 20:15:26

Docker 离线安装指南

参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性，不同版本的Docker对内核版本有不同要求。例如，Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本，Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...

编程新知 2025/11/3 19:39:37

Java如何权衡是使用无序的数组还是有序的数组

在 Java 中，选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南： ⚖️ 核心权衡维度维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...

编程新知 2025/8/3 11:17:37

蓝牙 BLE 扫描面试题大全(2)：进阶面试题与实战演练

前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)：从基础到实战的深度解析-CSDN博客，但实际面试中，企业更关注候选人对复杂场景的应对能力（如多设备并发扫描、低功耗与高发现率的平衡）和前沿技术的…...

编程新知 2025/10/27 3:03:38

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类在 Nav2（Navigation2）的行为树框架中，行为树节点插件按照功能分为 Action（动作节点）、Condition（条件节点）、Control（控制节点）和 Decorator（装饰节点）四类。 1.1 动作节点 Action 执行具体的机器人操作或任务，直接与硬件、传感器或外部系统…...

编程新知 2025/7/24 3:18:58