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

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

news 2026/2/8 3:23:05

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

的参考价值会越来越高。 

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-生命周期和钩子函数

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

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

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

秋招实习刷题网站推荐&#xff1a;codefun2000.com&#xff0c;还有题解博客&#xff1a;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表示&#xff0c;他偶然发现了一篇解释如何用PostgreSQL无缝替换etcd的文章。该文章指出&#xff0c;Kine项目作为外部etcd端点&#xff0c;可以将Kubernetes etcd请求转换为底层关系数据库的SQL查询。 受到这种方法的启发&#xff0c;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）沉浸式游戏

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

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

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

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

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

SpringBoot 解决跨域问题

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

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

2023 年牛客多校第十场题解

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

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

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

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

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

WebRTC | SDP详解

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

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

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

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

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

最新AI系统ChatGPT程序源码/支持GPT4/自定义训练知识库/GPT联网/支持ai绘画(Midjourney)+Dall-E2绘画/支持MJ以图生图

一、前言 SparkAi系统是基于国外很火的ChatGPT进行开发的Ai智能问答系统。本期针对源码系统整体测试下来非常完美&#xff0c;可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。 那么如何搭建部署AI创作ChatGPT&#xff1f;小编这里写一个详细图文教程吧&#xff01…...

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

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

文章目录 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

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

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

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

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

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

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

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

信号Ⅲ &#x1f517; 接上篇七、可重入函数八、volatile 关键字九、SIGCHLD 信号 &#x1f517; 接上篇 &#x1f449;&#x1f517;进程信号篇Ⅰ&#xff1a;信号的产生&#xff08;signal、kill、raise、abort、alarm&#xff09;、信号的保存&#xff08;core dump&#x…...

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

排序算法：冒泡排序

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

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

Spring事件监听源码解析

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

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

Cpp学习——list的模拟实现

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

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

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

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

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

XML Group端口详解

在XML数据映射过程中&#xff0c;经常需要对数据进行分组聚合操作。例如&#xff0c;当处理包含多个物料明细的XML文件时&#xff0c;可能需要将相同物料号的明细归为一组&#xff0c;或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码&#xff0c;增加了开…...

编程新知 2026/2/5 19:49:27

Docker 离线安装指南

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

编程新知 2026/2/7 6:10:30

云计算——弹性云计算器（ECS）

弹性云服务器&#xff1a;ECS 概述 云计算重构了ICT系统&#xff0c;云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台&#xff0c;包含如下主要概念。 ECS&#xff08;Elastic Cloud Server&#xff09;&#xff1a;即弹性云服务器&#xff0c;是云计算…...

编程新知 2025/8/16 21:50:27

练习（含atoi的模拟实现,自定义类型等练习）

一、结构体大小的计算及位段 &#xff08;结构体大小计算及位段 详解请看&#xff1a;自定义类型&#xff1a;结构体进阶-CSDN博客&#xff09; 1.在32位系统环境&#xff0c;编译选项为4字节对齐&#xff0c;那么sizeof(A)和sizeof(B)是多少&#xff1f; #pragma pack(4)st…...

编程新知 2026/1/30 15:16:30

无法与IP建立连接，未能下载VSCode服务器

如题&#xff0c;在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈&#xff0c;发现是VSCode版本自动更新惹的祸&#xff01;&#xff01;&#xff01; 在VSCode的帮助->关于这里发现前几天VSCode自动更新了&#xff0c;我的版本号变成了1.100.3 才导致了远程连接出…...

编程新知 2026/1/22 21:24:01

Unity | AmplifyShaderEditor插件基础（第七集：平面波动shader）

目录 一、&#x1f44b;&#x1f3fb;前言 二、&#x1f608;sinx波动的基本原理 三、&#x1f608;波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、&#x1f30a;波动优化…...

编程新知 2026/2/6 22:55:12

零基础在实践中学习网络安全-皮卡丘靶场（第九期-Unsafe Fileupload模块）（yakit方式）

本期内容并不是很难&#xff0c;相信大家会学的很愉快&#xff0c;当然对于有后端基础的朋友来说&#xff0c;本期内容更加容易了解&#xff0c;当然没有基础的也别担心&#xff0c;本期内容会详细解释有关内容 本期用到的软件&#xff1a;yakit&#xff08;因为经过之前好多期…...

编程新知 2026/1/21 12:29:04

现有的 Redis 分布式锁库（如 Redisson）提供了哪些便利？

现有的 Redis 分布式锁库&#xff08;如 Redisson&#xff09;相比于开发者自己基于 Redis 命令&#xff08;如 SETNX, EXPIRE, DEL&#xff09;手动实现分布式锁&#xff0c;提供了巨大的便利性和健壮性。主要体现在以下几个方面&#xff1a; 原子性保证 (Atomicity)&#xff…...

编程新知 2025/9/23 11:26:04

计算机基础知识解析：从应用到架构的全面拆解

目录 前言 1、 计算机的应用领域&#xff1a;无处不在的数字助手 2、 计算机的进化史&#xff1a;从算盘到量子计算 3、计算机的分类&#xff1a;不止 “台式机和笔记本” 4、计算机的组件&#xff1a;硬件与软件的协同 4.1 硬件&#xff1a;五大核心部件 4.2 软件&#…...

编程新知 2026/1/31 9:44:27

抽象类和接口（全）

一、抽象类 1.概念&#xff1a;如果⼀个类中没有包含⾜够的信息来描绘⼀个具体的对象&#xff0c;这样的类就是抽象类。 像是没有实际⼯作的⽅法,我们可以把它设计成⼀个抽象⽅法&#xff0c;包含抽象⽅法的类我们称为抽象类。 2.语法 在Java中&#xff0c;⼀个类如果被 abs…...

编程新知 2026/2/5 4:38:22