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

Vue2中常用的核心函数（选项和生命周期钩子）的完整示例及总结

news 来源：原创 2025/6/29 9:12:14

以下是Vue2中常用的核心函数（选项和生命周期钩子）的完整示例及总结：
在这里插入图片描述

1. 实例选项函数

`data`

初始化组件数据

new Vue({el: '#app',data() {return {message: 'Hello Vue!'};}
});

`methods`

定义组件方法

new Vue({el: '#app',data() {return { count: 0 };},methods: {increment() {this.count++;}}
});

`computed`

定义计算属性

new Vue({el: '#app',data() {return { firstName: 'John', lastName: 'Doe' };},computed: {fullName() {return `${this.firstName} ${this.lastName}`;}}
});

`watch`

监听数据变化

new Vue({el: '#app',data() {return { value: 0 };},watch: {value(newVal, oldVal) {console.log('Value changed from', oldVal, 'to', newVal);}}
});

2. 生命周期钩子

`created`

实例初始化后调用

new Vue({el: '#app',created() {console.log('Instance created!', this);}
});

`mounted`

挂载到DOM后调用

new Vue({el: '#app',mounted() {console.log('DOM mounted:', this.$el);}
});

`beforeDestroy`

销毁前调用

new Vue({el: '#app',beforeDestroy() {console.log('Before destroy');}
});

`destroyed`

销毁后调用

new Vue({el: '#app',destroyed() {console.log('Instance destroyed');}
});

3. 其他常用函数

`$on/$emit`（事件系统）

new Vue({el: '#app',created() {this.$on('event', (data) => {console.log('Received:', data);});this.$emit('event', 'Hello');}
});

`$nextTick`（DOM更新后执行）

new Vue({el: '#app',methods: {updateDOM() {this.message = 'New Text';this.$nextTick(() => {console.log('DOM updated:', this.$el.textContent);});}}
});

总结表格

函数/钩子	类型	描述	示例
`data`	实例选项	初始化组件数据	`data() { return { message: 'Hello' }; }`
`methods`	实例选项	定义组件方法	`methods: { increment() { this.count++; } }`
`computed`	实例选项	响应式计算属性	`computed: { fullName() { return this.firstName + this.lastName; } }`
`watch`	实例选项	监听数据变化	`watch: { value: (newVal, oldVal) => console.log('changed') }`
`created`	生命周期钩子	实例创建后调用	`created() { console.log('created'); }`
`mounted`	生命周期钩子	DOM挂载后调用	`mounted() { console.log(this.$el); }`
`beforeDestroy`	生命周期钩子	销毁前调用	`beforeDestroy() { console.log('before destroy'); }`
`$on/$emit`	实例方法	组件间通信（监听/触发事件）	`this.$on('event', callback); this.$emit('event', data);`
`$nextTick`	实例方法	DOM更新后执行回调	`this.$nextTick(() => { ... });`

以上覆盖了Vue2中常用的核心函数和生命周期钩子，示例均基于Vue实例配置。如需更详细的用法，可参考Vue2官方文档。

Vue2中常用的核心函数（选项和生命周期钩子）的完整示例及总结

以下是Vue2中常用的核心函数（选项和生命周期钩子）的完整示例及总结： 1. 实例选项函数 data 初始化组件数据 new Vue({el: #app,data() {return {message: Hello Vue!};} });methods 定义组件方法 new Vue({el: #app,data() {return { c…...

编程日记 2025/6/29 9:12:14

数据集-目标检测系列- F35 战斗机检测数据集 F35 plane ＞＞ DataBall

数据集-目标检测系列- F35 战斗机检测数据集 F35 plane >> DataBall DataBall 助力快速掌握数据集的信息和使用方式。贵在坚持！ * 相关项目 1）数据集可视化项目：gitcode: https://gitcode.com/DataBall/DataBall-detections-100s…...

编程日记 2025/6/29 12:05:29

2025年3月AGI技术月评｜技术突破重构数字世界底层逻辑

〔更多精彩AI内容，尽在「魔方AI空间」 ，引领AIGC科技时代〕本文作者：猫先生 ——当「无限照片」遇上「可控试穿」，我们正在见证怎样的智能革命？ 被低估的进化：开源力量改写游戏规则当巨头们在AGI赛道…...

编程日记 2025/6/29 11:25:17

【k8s】k8s是怎么实现自动扩缩的

Kubernetes 提供了多种自动扩缩容机制，主要包括 Pod 水平自动扩缩（HPA）、垂直 Pod 自动扩缩（VPA） 和集群自动扩缩（Cluster Autoscaler）。以下是它们的实现原理和配置方法： 1. Pod …...

编程日记 2025/6/29 11:01:20

协作开发攻略：Git全面使用指南 — 引言

协作开发攻略：Git全面使用指南 — 引言 Git 是一种分布式版本控制系统，用于跟踪文件和目录的变更。它能帮助开发者有效管理代码版本，支持多人协作开发，方便代码合并与冲突解决，广泛应用于软件开发领域。文中内容仅限技…...

编程日记 2025/6/29 9:15:39

【AI提示词】私人教练

提示说明以专业且细致的方式帮助客户实现健康与健身目标，提升整体生活质量。提示词 # Role: 私人教练## Profile - language: 中文 - description: 以专业且细致的方式帮助客户实现健康与健身目标，提升整体生活质量 - background: 具备丰富的健身经…...

编程日记 2025/6/29 10:56:43

【星海出品】Calico研究汇总

Calico项目由Tigera公司发起并主导开发源码 https://github.com/projectcalico/calico?tabreadme-ov-file#-join-the-calico-community 简介 Tigera是一家专注于云原生安全的公司，于2016年成立，其核心产品包括开源的Calico项目以及商业版的Calico Ent…...

编程日记 2025/6/29 11:44:30

观成科技：摩诃草组织Spyder下载器流量特征分析

一、概述自2023年以来，摩诃草组织频繁使用Spyder下载器下载远控木马，例如Remcos。观成安全研究团队对近几年的Spyder样本进行了深入研究，发现不同版本的样本在数据加密、流量模式等方面存在差异。基于此，我们对多个版本样本的通…...

编程日记 2025/6/29 10:53:36

中心极限定理（CLT）习题集 · 题目篇

中心极限定理（CLT）习题集题目篇共 18 题，覆盖经典 CLT、Lyapunov/Lindeberg 条件、Berry–Esseen 评估、以及工程/数据科学应用与编程仿真。推荐先独立完成，再看《答案与解析篇》。之前已经出过相关的知识点文章，…...

编程日记 2025/6/29 9:15:16

ITL和TTL线程间值的传递

InheritableThreadLocal InheritableThreadLocal 继承自 ThreadLocal，增加了父线程到子线程的值传递功能。当一个新线程被创建时，InheritableThreadLocal 会将父线程中 ThreadLocal 变量的值拷贝到子线程（浅拷贝），子线…...

编程日记 2025/6/29 10:57:28

Android学习总结之Room篇

一、Room 框架基础 1. 实体类（Entity） 实体类用于描述数据库表的结构。通过使用 Entity 注解，可以将一个 Java 类映射到数据库中的一张表。例如，以下是一个简单的 User 实体类： import androidx.room.Entity; impor…...

编程日记 2025/6/29 11:26:39

java IO流

一：概述 （1）IO （2）流二：分类 （1）流向 （2）数据单位 （3）IO流角色三：API （1）InputStream &#xff…...

编程日记 2025/6/29 10:42:37

STM32 串口USART

目录常见的通信方式串行通信和并行通信全双工，半双工和单工通信同步通信和异步通信通信速率常见的通信协议串口基础知识电平特性串口传输协议 STM32F103的USART资源端口引脚数据寄存器单元发送接收控制单元实现串口发送 printf…...

编程日记 2025/6/29 11:30:20

数字IC后端项目典型问题之后端实战项目问题记录（2025.04.24）

今天给大家分享下近两天小编帮助学员解决的几个经典后端项目问题。希望能够对大家的学习和工作有所帮助。 Q1:在做a7top顶层物理验证Calibre LVS检查时提示NOT COMPARED，请问是什么原因？ 我们在用calibre检查LVS后，其结果基本上就是以下三种…...

编程日记 2025/6/29 9:52:06

关于边缘计算盒子的外部接口保护

边缘计算盒子是一种基于边缘计算和人工智能技术的智能设备，它内置了灵活可配的多样化AI算法库，所以也被称为AI算法盒子或智能边缘分析一体机，可以将数据处理和分析的能力推至离数据源最近的边缘位置，提供高效的数据处理和实时响应…...

编程日记 2025/6/29 10:26:59

OCP考试需要注意什么？

一、OCP考试需要准备的资料身份证件：携带有效的身份证件（如身份证、护照等），以便在考试当天进行身份验证。确保身份证件在考试当天仍然有效，并且与报名时使用的证件一致。准考证：打印并携带准考证&…...

编程日记 2025/6/29 10:06:46

用原先别人账号,无权下更新 http方式设置自己账号例如 git fetch --all 提示没有权限从 http://192.168.1.2/gitlab/项目路径.git下载 git remote set-url origin http://your-username192.168.1.2/gitlab/项目路径.git your-username修改成自己的git账号需要输入一个Tok…...

编程日记 2025/6/29 11:37:31

postgres 导出导入（基于数据库，模式，表）

在 PostgreSQL 中，导出和导入数据库、模式（schema）或表的数据可以使用多种工具和方法。以下是常用的命令和步骤，分别介绍如何导出和导入整个数据库、特定的模式以及单个表的数据。一、导出数据 1. 使用 pg_dump 导出整个数据库…...

编程日记 2025/6/29 11:21:39

把dll模块注入到游戏进程的方法_挂起进程注入

一．概述挂起进程注入是指在创建进程的时候把运行状态设置为挂起，然后创建一个远程线程，来注入。挂起进程注入作为远线程注入的一个补充，可以在进程创建的时候就注入，从而注入时间较早，不宜被拦截。易知挂起进程注入的局限性也就是如果进程已经启动，那么这种注入方式就…...

编程日记 2025/6/29 12:25:40

TypeScript 开发实战：如何安全替换字符串中的关键字

在 TypeScript 开发中，我们经常需要处理字符串替换的场景。最近我在开发一个表达式解析功能时，遇到了一个有趣的挑战：如何将用户输入的简化数学表达式（如"sin"）替换为标准形式（如"Math.sin&…...

编程日记 2025/6/29 12:15:00

ES6 模块化与 CommonJS 的核心概念解析

以下是关于 ES6 模块化与 CommonJS 的核心概念解析、知识点总结及使用场景说明： 1. ES6 模块化与 CommonJS 是什么？ ES6 模块化（ECMAScript Modules, ESM） 定义：ES6 标准引入的模块系统，使用 import 和 …...

编程日记 2025/6/29 9:17:11

【踩坑记录】stm32 jlink程序烧录不进去

最近通过Jlink给STM32烧写程序时一直报错，但是换一个其他工程就可以烧录，对比了一下jink配置，发现是速率选太高了“SW Device”，将烧录速率调整到10MHz以下就可以了...

编程日记 2025/6/29 12:11:50

CS144 Lab 6 实战记录：构建 IP 路由器

1 实验背景与目标在 CS144 的 Lab 6 中，我们需要在之前实现的 NetworkInterface（Lab 5）基础上构建一个完整的 IP 路由器。路由器的主要任务是根据路由表将接收到的 IP 数据报转发到正确的网络接口，并发送给正确的下一跳&#xf…...

编程日记 2025/6/29 10:40:43

AI与智能能源管理：如何通过AI优化能源分配和消耗？

引言：能源管理面临的新挑战在“双碳”目标持续推进的背景下，能源管理已经不再是简单的节电节水问题，而是关乎可持续发展和企业长期竞争力的核心议题。无论是工业园区、写字楼，还是家庭用户，能源的使用正在变得越来越复…...

编程日记 2025/6/29 9:16:12

【蓝桥杯】产值调整

产值调整题目描述偏远的小镇上，三兄弟共同经营着一家小型矿业公司“兄弟矿业”。公司旗下有三座矿山：金矿、银矿和铜矿，它们的初始产值分别用非负整数 A A A、 B B B 和 C C C 表示。这些矿山的产出是小镇经济的核心，支撑着…...

编程日记 2025/6/29 11:10:25

使用Next.js构建单页面React应用

最近遇到一个问题突然要一个单页面的项目用惯了Next.js 而 create-react-app 又不推荐且不灵活最终找发现Nextjs也支持单页面应用以下是使用Next.js构建单页面React应用过程 1 正常创建项目 (我选择的是Pages Router 而非 AppRoute) 2 修改配置文件 next.config.ts impor…...

编程日记 2025/6/29 12:13:17

Python字符串三剑客：len()、split()、join()深度解析

目录一、len()：字符串的"测谎仪" 二、split()：字符串的"解剖刀" 参数解析： 实战场景： 三、join()：字符串的"缝合怪" 性能优势： 实战案例： 高级技巧&…...

编程日记 2025/6/29 9:16:37

大模型是如何生成内容的？

大模型（如 GPT、Claude、LLaMA 等）生成内容的过程，其实就是一个逐词预测上下文推理的过程。我们可以把它想象成一个“超级自完成引擎”：每一步都在问自己—— “在目前上下文下，最合理的下一个词是什么？”…...

编程日记 2025/6/29 10:12:57

Python元组全面解析：从基础到高级应用指南

一、元组基础概念与核心特性 1.1 元组的本质定义元组（Tuple）是Python中重要的不可变序列类型，由多个元素组成的有序集合。其核心特性表现在： 元素按插入顺序存储，支持索引访问所有元素存储在连续内存空间&#xff…...

编程日记 2025/6/28 10:53:58

Docker部署DeepSeek常见问题及解决方案

在使用Docker部署DeepSeek的过程中，许多开发者可能会遇到一些常见问题。本文整理了几个高频问题及其解决方案，帮助大家更顺利地完成部署。镜像拉取失败问题现象执行 docker pull 命令时，提示超时或镜像不存在。可能原因 1. 网络环境不稳定，导致连接Docker Hub失败…...

编程日记 2025/6/29 12:10:21

身份证实名认证接口数字时代的信任基石-node.js实名认证集成

在互联网深度渗透生活的当下，从线上购物、社交娱乐到金融理财、政务办理，每一次指尖的触碰都在虚拟世界中留下痕迹。身份证实名认证作为连接现实身份与网络身份的桥梁，正以其不可替代的作用，重塑着数字时代的信任体系。它不仅是保…...

编程日记 2025/6/29 9:16:52

多维时序 | LightGBM多变量时序预测（Matlab完整源码和数据，适合基础小白研究）

多维时序 | LightGBM多变量时序预测（Matlab完整源码和数据，适合基础小白研究） 目录多维时序 | LightGBM多变量时序预测（Matlab完整源码和数据，适合基础小白研究）效果一览基本介绍程序设计参考资料效果一览…...

编程日记 2025/6/29 11:39:25

强化学习（Reinforcement Learning, RL）和深度学习（Deep Learning, DL）

强化学习（Reinforcement Learning, RL）和深度学习（Deep Learning, DL）是人工智能领域两个重要的研究方向，虽然二者可以结合（如深度强化学习），但其核心思想、目标和应用场景存在本质区…...

编程日记 2025/6/29 10:08:17

图论---Prim堆优化（稀疏图）

题目通常会提示数据范围： 若 V ≤ 500，两种方法均可（朴素Prim更稳）。若 V ≤ 1e5，必须用优先队列Prim vector 存图。 #include <iostream> #include <vector> #include <queue> #include <…...

编程日记 2025/6/29 10:20:30

【优秀三方库研读】【C++基础知识】odygrd/quill -- 折叠表达式

compute_encoded_size_and_cache_string_lengths 方法中这段代码是一个C的折叠表达式（fold expression）的应用，用于计算多个参数编码后的总大小。下面我将详细解释这段代码的每个部分，并说明为什么这样写。代码如下： …...

编程日记 2025/6/29 10:25:02

优化Nginx的下载功能

缘起： 我购置了一台阿里云ECS，其EIP带宽3m/s，但是在其上的作为下载文件的服务器nginx提供的下载速度仅有几百KB。分析： 既然没有达到带宽瓶颈，肯定存在优化的空间。浮现脑海的想法，nginx没有进行最佳配置…...

编程日记 2025/6/29 12:26:02

Vue3集成浏览器API实时语音识别

效果示例用法  <BrowserSpeechRecognitionModal v-if"showModal" :isOpen"showModal" close"showModal false" confirm"handleRecognitionResult" />const showModal ref(false); const input…...

编程日记 2025/6/29 9:12:18

Python3 基础：函数定义与调用

Python3 基础：函数定义与调用什么是函数？一、函数的定义二、函数的调用三、函数参数3.1位置参数3.2关键字参数3.3默认参数值3.4可变数量的参数args：接收任意数量的位置参数**kwargs：接收任意数量的关键字参数 3.5 综合使用各种参…...

编程日记 2025/6/29 9:12:16

Vue 2 的响应式 API 和 Vue 3 的组合式 API 的详细对比，从核心机制、使用方式、代码示例及优缺点展开

以下是 Vue 2 的响应式 API 和 Vue 3 的组合式 API 的详细对比，从核心机制、使用方式、代码示例及优缺点展开： 1. Vue 2 的响应式 API 核心机制基于 Object.defineProperty： 通过劫持对象的 getter 和 setter 实现数据变化追踪。限制&…...

编程日记 2025/6/29 9:12:28

修改了Element UI中组件的样式，打包后样式丢失

修改了Element UI中组件的样式，在本地运行没有问题，但是打包到线上发现样式丢失（样式全部不生效、或者有一部分生效，一部分不生效），问题在于css的加载顺序导致代码编译后样式被覆盖了， 解决办法…...

编程日记 2025/6/29 9:12:19

大模型工业化元年：GPT-5开启通用AI新纪元，中国技术如何破局？

过去一周，AI领域的焦点无疑是OpenAI发布的GPT-5预览版，以及全球大模型技术从实验室迈向工业化的关键转折。这场变革不仅标志着通用人工智能（AGI）的进一步逼近，更掀起了全球产业链的竞争与反思。本文将从技术突破、产业…...

编程日记 2025/6/29 9:12:11

离线电脑安装python包

离线电脑安装python第三方库在联网电脑上下载Python包使用pip安装所需的包，例如 pip install requests numpy导出已安装的包列表 pip freeze > requirements.txt根据requirements.txt下载包及其所有依赖项到指定目录： pip download -r require…...

编程日记 2025/6/29 10:57:03

【Unity AR开发插件】一、高效热更新：Unity AR 插件结合 HybridCLR 与 ARFoundation 的开源仓库分享

摘要本篇博客详细介绍了我基于 HybridCLR 与 AR Foundation 的 Unity AR 开发插件，旨在为开发者提供高效的跨平台热更新方案。文章从背景与动机出发，覆盖一键安装工具、环境配置、热更新数据制作与示例程序运行等核心模块，并展示代码结构与使…...

编程日记 2025/6/29 12:00:17

深入浅出学会函数（下）

5. return语句在函数的设计中，函数中经常会出现return语句，这里讲一下return语句使用的注意事项。 return 后面可以是一个数值，也可以是一个表达式，如果是表达式先执行表达式，再返回表达式的结果。return 后面也可以…...

编程日记 2025/6/29 9:53:10

架构-软件工程

一、软件过程模型（核心高频考点） 1. 瀑布模型知识点：严格分阶段（需求→设计→编码→测试→维护），前一阶段输出是后一阶段输入，阶段间因果紧密，适合需求明确且稳定的项目。缺点&am…...

编程日记 2025/6/29 12:23:36

Redis 及其在系统设计中的作用

什么是Redis Redis 是一个开源的内存数据结构存储系统，可用作数据库、缓存和消息代理。它因其快速的性能、灵活性和易用性而得到广泛应用。 Redis 数据存储类型 Redis 允许开发人员以各种数据结构（例如字符串、位图、位域、哈希、列表、集合、有序集合…...

编程日记 2025/6/29 9:12:32

运维打铁：Centos 7 使用yum安装 mysql5.7

文章目录一、安装前信息说明二、安装步骤1. 下载并安装官网 RPM 安装包2. 修改配置文件 /etc/my.cnf3. 创建 MySQL 数据相关目录并授权4. 启动 MySQL 服务三、修改数据库访问密码1. 修改配置文件 /etc/my.cnf2. 重启 MySQL 服务3. 登录数据库并修改密码4. 恢复配置文件并重启…...

编程日记 2025/6/29 10:25:11

第二章：MCP服务器分类

Chapter 2: MCP服务器分类 🌟 从上一章到本章在第一章：Model Context Protocol (MCP)中，我们学习了如何通过MCP让LLM安全访问文件系统。现在，让我们想象一个更复杂的需求：假设你需要让LLM同时处理文件、查询数据库、…...

编程日记 2025/6/29 9:12:21

遨游三防|30200mAh、双露营灯三防平板，见证堆料天花板

在工业4.0与智能化转型的浪潮中，专业设备对性能、防护及场景适应性的要求日益严苛。遨游通讯作为国家级高新技术企业，依托“危、急、特”场景的深耕经验，推出的旗舰级产品AORO-P300三防平板，以30200mAh超大容量电池、双露营灯设计…...

编程日记 2025/6/29 9:12:34

OFDM 信道表示(3)

上节我们令得到频域相关系数与PDP是一对傅里叶变换对。这次我们令即只考虑同一个RE上随时间变化得过程。为接收信号自相关函数，令即为上式所以可得Doppler 功率谱和子相关函数一对傅里叶变换对。上面给出多径DPL信道接受信号表示，其中为t时间多径时延…...

编程日记 2025/6/29 9:12:22

1. 实例选项函数

data

methods

computed

watch

2. 生命周期钩子

created

mounted

beforeDestroy

destroyed