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

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

news 2025/7/4 19:48:30

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

的参考价值会越来越高。 

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

stm32G473的flash模式是单bank还是双bank？

今天突然有人stm32G473的flash模式是单bank还是双bank&#xff1f;由于时间太久&#xff0c;我真忘记了。搜搜发现&#xff0c;还真有人和我一样。见下面的链接&#xff1a;https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

编程新知 2025/6/28 11:42:05

K8S认证|CKS题库+答案| 11. AppArmor

目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作&#xff1a; 1&#xff09;、切换集群 2&#xff09;、切换节点 3&#xff09;、切换到 apparmor 的目录 4&#xff09;、执行 apparmor 策略模块 5&#xff09;、修改 pod 文件 6&#xff09;、…...

编程新知 2025/7/4 5:32:51

FastAPI 教程：从入门到实践

FastAPI 是一个现代、快速&#xff08;高性能&#xff09;的 Web 框架&#xff0c;用于构建 API&#xff0c;支持 Python 3.6。它基于标准 Python 类型提示&#xff0c;易于学习且功能强大。以下是一个完整的 FastAPI 入门教程&#xff0c;涵盖从环境搭建到创建并运行一个简单的…...

编程新知 2025/6/25 16:32:53

基础测试工具使用经验

背景 vtune&#xff0c;perf, nsight system等基础测试工具&#xff0c;都是用过的&#xff0c;但是没有记录&#xff0c;都逐渐忘了。所以写这篇博客总结记录一下&#xff0c;只要以后发现新的用法&#xff0c;就记得来编辑补充一下 perf 比较基础的用法&#xff1a; 先改这…...

编程新知 2025/6/17 3:13:49

Python爬虫（二）：爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...

编程新知 2025/6/16 20:22:52

ETLCloud可能遇到的问题有哪些？常见坑位解析

数据集成平台ETLCloud&#xff0c;主要用于支持数据的抽取&#xff08;Extract&#xff09;、转换&#xff08;Transform&#xff09;和加载&#xff08;Load&#xff09;过程。提供了一个简洁直观的界面&#xff0c;以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...

编程新知 2025/7/4 14:11:29

HTML前端开发：JavaScript 常用事件详解

作为前端开发的核心&#xff0c;JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例&#xff1a; 1. onclick - 点击事件 当元素被单击时触发&#xff08;左键点击&#xff09; button.onclick function() {alert("按钮被点击了&#xff01;&…...

编程新知 2025/6/25 15:20:35

Java入门学习详细版（一）

大家好&#xff0c;Java 学习是一个系统学习的过程&#xff0c;核心原则就是“理论 实践 坚持”&#xff0c;并且需循序渐进&#xff0c;不可过于着急&#xff0c;本篇文章推出的这份详细入门学习资料将带大家从零基础开始&#xff0c;逐步掌握 Java 的核心概念和编程技能。 …...

编程新知 2025/6/21 6:15:03

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码： prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...

编程新知 2025/7/4 0:50:01

html css js网页制作成品——HTML+CSS榴莲商城网页设计（4页）附源码

目录 一、&#x1f468;‍&#x1f393;网站题目 二、✍️网站描述 三、&#x1f4da;网站介绍 四、&#x1f310;网站效果 五、&#x1fa93; 代码实现 &#x1f9f1;HTML 六、&#x1f947; 如何让学习不再盲目 七、&#x1f381;更多干货 一、&#x1f468;‍&#x1f…...

编程新知 2025/7/4 0:35:23