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

Vue 2 中 Vue 实例对象（vm）的所有核心方法，包含完整示例、使用说明及对比表格

news 来源：原创 2025/5/24 1:26:40

以下是 Vue 2 中 Vue 实例对象（vm）的所有核心方法，包含完整示例、使用说明及对比表格：
在这里插入图片描述

1. `$mount()`

作用：手动挂载 Vue 实例到 DOM 元素
参数：

element：DOM 元素或选择器字符串（可选）
示例：

// 创建实例但不自动挂载
const vm = new Vue({template: '<div>{{ message }}</div>',data: { message: 'Hello Vue!' }
});// 手动挂载到 #app 元素
vm.$mount('#app');

2. `$destroy()`

作用：销毁 Vue 实例，停止监听和事件
参数：无
示例：

const vm = new Vue({ ... });
vm.$destroy(); // 销毁后实例不再响应数据变化

3. `$on(eventName, callback)`

作用：监听自定义事件
参数：

eventName：事件名称（字符串）
callback：回调函数
示例：

vm.$on('custom-event', (data) => {console.log('Received:', data);
});// 触发事件
vm.$emit('custom-event', 'Hello!');

4. `$once(eventName, callback)`

作用：监听一次事件后自动移除
参数：同 $on
示例：

vm.$once('once-event', (data) => {console.log('Only once:', data);
});vm.$emit('once-event', 'Triggered!'); // 只执行一次
vm.$emit('once-event', 'Again');      // 不再触发

5. `$off(eventName, callback)`

作用：移除事件监听
参数：

eventName：事件名称（字符串）
callback：要移除的回调（可选）
示例：

const handler = () => console.log('Event triggered');
vm.$on('remove-event', handler);
vm.$off('remove-event', handler); // 移除特定回调
vm.$off();                        // 移除所有事件

6. `$emit(eventName, ...args)`

作用：触发自定义事件
参数：

eventName：事件名称
...args：传递给回调的参数
示例：

vm.$emit('custom-event', 'Hello', 123); // 触发事件并传递参数

7. `$watch(expression, callback)`

作用：监听数据变化
参数：

expression：要监听的表达式（如 data.key）
callback(newVal, oldVal)：数据变化时的回调
示例：

vm.$watch('count', (newVal, oldVal) => {console.log(`Count changed from ${oldVal} to ${newVal}`);
});vm.count = 5; // 触发回调

8. `$set(target, key, value)`

作用：向响应式对象添加新属性
参数：

target：目标对象
key：属性名
value：属性值
示例：

vm.$set(vm.obj, 'newKey', 'newValue'); // 确保响应式更新

9. `$delete(target, key)`

作用：删除响应式对象的属性
参数：同 $set
示例：

vm.$delete(vm.obj, 'oldKey'); // 安全删除属性

10. `$nextTick(callback)`

作用：DOM 更新后执行回调
参数：

callback：DOM 更新后的回调
示例：

vm.message = 'Updated'; // 触发数据变化
vm.$nextTick(() => {console.log(vm.$el.textContent); // 获取更新后的 DOM
});

11. `$forceUpdate()`

作用：强制重新渲染组件（即使数据未变化）
参数：无
示例：

vm.$forceUpdate(); // 强制重新渲染

对比表格总结

方法	作用	参数	返回值	示例简写
`$mount`	手动挂载实例	`element: string/HTMLElement` (可选)	Vue 实例	`vm.$mount('#app')`
`$destroy`	销毁实例	无	无	`vm.$destroy()`
`$on`	监听事件	`eventName: string`, `callback: Function`	Vue 实例	`vm.$on('event', () => {...})`
`$once`	监听一次事件	`eventName: string`, `callback: Function`	Vue 实例	`vm.$once('event', () => {...})`
`$off`	移除事件监听	`eventName: string`, `callback: Function` (可选)	Vue 实例	`vm.$off('event', handler)`
`$emit`	触发事件	`eventName: string`, `...args`	Vue 实例	`vm.$emit('event', data)`
`$watch`	监听数据变化	`expression: string`, `callback: Function`	unwatch 函数	`vm.$watch('key', (newVal, oldVal) => {...})`
`$set`	安全添加响应式属性	`target: Object`, `key: string`, `value: any`	被添加的值	`vm.$set(vm.obj, 'newKey', 'value')`
`$delete`	安全删除响应式属性	`target: Object`, `key: string`	无	`vm.$delete(vm.obj, 'oldKey')`
`$nextTick`	DOM 更新后执行回调	`callback: Function`	Promise (Vue 2.4+)	`vm.$nextTick(() => { ... })`
`$forceUpdate`	强制重新渲染组件	无	无	`vm.$forceUpdate()`

关键差异对比

方法	作用范围	数据/功能影响	典型场景
$mount	实例挂载	控制挂载目标	手动挂载到特定 DOM 元素
$destroy	实例生命周期	完全销毁实例	清理资源或移除组件
$o n /$ once/$off	事件监听与管理	灵活管理自定义事件	跨组件通信或动态事件监听
$emit	触发事件	触发其他组件或父组件的事件	组件间通信（替代 props 钉扎）
$watch	数据监控	监听特定数据变化	复杂逻辑依赖数据变化时触发操作
$se t /$ delete	响应式数据操作	确保新增/删除属性的响应性	动态操作对象属性时避免丢失响应性
$nextTick	DOM 更新时机	确保在 DOM 更新后执行代码	操作更新后的 DOM 结构
$forceUpdate	强制渲染	跳过 Vue 的响应式检测	手动触发渲染（如外部 DOM 变化后）

使用建议

事件系统：优先使用 $on/$emit 实现组件间通信，但避免过度依赖全局事件。
数据监听：用 $watch 处理复杂依赖，但注意内存泄漏（需在销毁时调用 unwatch）。
响应式操作：始终用 $set/$delete 操作对象属性，避免直接 obj.key = value。
DOM 操作：用 $nextTick 确保 DOM 更新完成后再操作，替代 setTimeout。
组件销毁：在 Vue 生命周期钩子（如 beforeDestroy）中清理资源。

如果需要更具体场景的代码示例或深入解释，请进一步说明！

Vue 2 中 Vue 实例对象（vm）的所有核心方法，包含完整示例、使用说明及对比表格

以下是 Vue 2 中 Vue 实例对象（vm）的所有核心方法，包含完整示例、使用说明及对比表格： 1. $mount() 作用：手动挂载 Vue 实例到 DOM 元素参数： element：DOM 元素或选择器字符串（可…...

编程日记 2025/5/24 1:26:40

大模型的scaling laws：Scaling Laws for Neural Language Models

一、TL；DR Loss与模型size、数据集大小以及用于训练的计算量呈幂律关系其他架构细节，如网络宽度或深度，在较宽范围内影响极小简单的公式可以描述过拟合与模型/数据集大小的依赖关系，以及训练速度与模型大小的依赖关系作用&#x…...

编程日记 2025/5/23 23:31:40

【Docker】使用 jq 管理镜像源

国内访问 Docker Hub 速度较慢，通过配置国内镜像加速器，可显著加快拉取镜像速度。使用 jq 操作 /etc/docker/daemon.json 的 registry-mirrors 字段，可避免手动编辑带来的格式错误，并在添加、替换、删除等场景下保持高效与安全。 …...

编程日记 2025/5/24 0:05:32

青年座谈会的读书汇报

今天，单位组织了一个五四青年座谈会，我们室由于大家都在出差忙之类的，我必须要参加，还要我做一个汇报，我一新来的还没深入到研发工作中，于是决定写了一篇简单的读书笔记，再用deepseek润色一下&a…...

编程日记 2025/5/24 0:53:59

leetcode刷题日记——两数相加

[ 题目描述 ]： [ 思路 ]： 通过两个循环将 l1, l2存储的数字读出，然后求和，再将结果存储链表中由此发了一个问题，结果溢出，如果使用更大的 long 类型，后续不出所料，仍然超出所以只能…...

编程日记 2025/5/24 0:34:17

使用腾讯地图检索地点

最近需求又多了，现在需要使用腾讯地图检索功能，需要经纬度返给商户后端效果图： 把地图写成组件现在components创建map/Getpoint.vue 代码如下 <template><div class"getpoint-container"><div><div id&…...

编程日记 2025/5/23 23:39:54

VINS-FUSION：跑通手机录制数据

文章目录 📚简介🚀手机录制数据🚀跑通数据🔧启动rviz🔧启动配置🔧播放rosbag🎯跑通结果 📚简介利用智能手机的摄像头IMU 采集数据，并在 VINS-Fusion（视觉惯…...

编程日记 2025/5/23 23:46:36

iView Table 组件跨页选择功能实现文档

iView Table 组件跨页选择功能实现文档功能概述实现基于 iView Table 组件的多选功能，支持以下特性： ✅ 跨页数据持久化选择✅ 当前页全选/取消全选✅ 自动同步选中状态显示✅ 分页切换状态保持✅ 高性能大数据量支持实现方案技术栈 iView UI 4…...

编程日记 2025/5/24 1:01:33

Spark知识总结

宽窄依赖：父RDD的分区只对应下面子RDD的一个分区，为窄依赖。其余为宽依赖维度‌‌窄依赖‌‌宽依赖‌数据传输无shuffle，本地处理14需shuffle，跨节点传输14并行度高（允许流水线并行）57低（需等…...

编程日记 2025/5/16 13:27:47

window 图形显示驱动-在 WDDM 1.2 中提供无缝状态转换(下)

在不禁用驱动程序的情况下转换到操作系统有时操作系统遇到不可恢复的错误，必须发出系统 bug 检查。发生这种情况时，在某些情况下，操作系统必须控制显示器，但无法停止 WDDM 驱动程序。需要 WDDM 1.2 及更高版本的驱动程序来实现…...

编程日记 2025/5/24 0:21:38

WPF之Label控件详解

文章目录 1. 引言2. Label控件基础2.1 类继承结构2.2 Label类定义 3. Label控件的核心属性3.1 Content属性3.2 Target属性3.3 其他常用属性 4. 标签样式与模板自定义4.1 简单样式设置4.2 使用Style对象4.3 触发器使用4.4 使用ControlTemplate完全自定义 5. Label与表单控件交互…...

编程日记 2025/5/11 2:44:46

STM32 HAL库实现USB虚拟串口

1. 引言在嵌入式系统开发中，USB 虚拟串口是一种非常实用的功能。它允许 STM32 微控制器通过 USB 接口与计算机进行通信，就像使用传统的串口一样。这种方式不仅简化了硬件设计，还提高了通信的灵活性和稳定性。STM32F407 系列微控制器具有强大…...

编程日记 2025/5/24 0:00:34

第二阶段：基础加强阶段总体介绍

Java语法的学习笔记下面放复习的文档链接，如果有需要可以前往下载获取，这个仓库还有关于mysql、hadoop、python等的复习部分，并且每个文档有着对应的代码部分。文章作为复习使用，更多代码内容见链接如下: https://gitee.com/zha…...

编程日记 2025/5/24 1:04:55

/** * 异步上传 BiopsyFlow 中的所有视频和音频文件到暂存服务器 */ private List<String> uploadBiopsyFlowFiles(BiopsyFlow biopsyFlow, SyncFile SyncFile) { List<String> fileBase64List syncFile.getFileBase64List(); if (CollectionUtils.is…...

编程日记 2025/5/24 0:03:49

leetcode283-移动零

leetcode 283 思路本题是通过把数组中所有不为0的数字前置，实现把所有的0后置的效果双指针法 slow 充当指针，记录当前零应该被移到的位置。而 i 用来遍历整个数组，检查每个元素。如果当前元素不为零，就将其与 slow 位置上的…...

编程日记 2025/5/19 11:13:31

【dify+docker安装教程】

目录一、dify安装包下载二、运行环境配置 1、下载docker 2、安装 2.1 新建文件夹 2.2 安装 2.3 命令安装 3.下载完成后需要重启电脑，注意保存文档！！注意保存！！注意！！（血的教…...

编程日记 2025/5/24 0:25:44

GPU虚拟化实现（五）

GPU虚拟化实现（五）章节回顾初步介绍详细介绍核心数据结构核心功能和运作机制初始化显存分配显存释放显存溢出检查显存类型检查查看分配信息代码执行流程假设例子总结章节回顾在上一章，简单介绍了项目拦截cuda函数的流程，其本质上与拦截nvml函数的流程是一致的，都是首先…...

编程日记 2025/5/23 23:44:43

C++——入门基础

文章目录一、前言二、C的发展历史2.1 C的诞生2.2 C的重要性三、C的应用3.1第一个C程序3.2 C版3.2 C版3.3 C版与C版的区分 3.2 namespace关键字3.2.1 namespace的意义3.2.2C中域的分类3.2.3 namespace的定义3.2.4 namespace的实质3.2.5 namespace的嵌套 3.3 作用域运算符 &…...

编程日记 2025/5/24 0:37:41

AT2401C与RFX2401C问题处理资料

1、AT2401C 可以 PIN 对 PIN 替代 RFX2401C 吗？ 答：AT2401C 可以 PIN 对 PIN 替换 RFX2401C；同时 CB2401 也可以 PIN 对 PIN 替换 RFX2401C；我们主要推 AT2401C 这款芯片，如果客户产品需要过认证或者应用于音频产品建…...

编程日记 2025/5/24 0:29:17

微信小程序连续多个特殊字符自动换行解决方法

效果图 .wxml <view class"container"><text>没转换{{text}}</text><view style"height: 60rpx;" /><text>转换后{{convert}}</text> </view>.js Page({data: {text:！！！&am…...

编程日记 2025/5/24 0:47:57

【Linux实践系列】：进程间通信：万字详解命名管道实现通信

🔥 本文专栏：Linux Linux实践项目 🌸作者主页：努力努力再努力wz 💪 今日博客励志语录： 与其等待完美的风，不如学会在逆风中调整帆的角度——所有伟大航程都始于此刻出发的勇气 ★★★ 本文前置知…...

编程日记 2025/5/23 23:48:18

【TS入门笔记4---装饰器】

TS入门笔记4 TypeScript---装饰器一、装饰器基础1. 定义与作用：装饰器是一种特殊类型的声明，它可以被附加到类声明、方法、访问符、属性或参数上，用来修改类的行为。在 TypeScript 里，装饰器本质上是一个函数，它接收不…...

编程日记 2025/5/20 9:26:26

大学之大：韩国科学技术研究院2025.4.28

韩国科学技术研究院（KAIST）作为韩国理工科教育与科研的旗舰机构，其发展历程深刻反映了韩国从工业化到科技强国的转型轨迹。以下从历史沿革、学科优势、教学特色、科研创新、教育规模、资源投入及未来战略等维度展开全面分析： 一、…...

编程日记 2025/5/9 16:44:06

【QT】QT控制硬件

QT控制硬件 1.上位机程序开发2.具体例子控制led灯3. linux中的函数跟QT类里面的函数同名，发生冲突4.示例代码 1.上位机程序开发 QT做一个上位机程序，控制底层的硬件设备(下位机) 总结： 在构造函数里面去初始化，打开硬件驱动在析…...

编程日记 2025/5/24 0:41:08

Spring的BeanFactory和FactoryBean的区别

‌BeanFactory和FactoryBean在Spring框架中扮演着不同的角色，具有不同的功能和用途。‌ 定义与角色 ‌BeanFactory‌：BeanFactory是Spring IoC容器的核心接口，用于管理和维护Bean的定义、创建和生命周期。它是Spring IoC容器的基础&…...

编程日记 2025/5/17 21:47:31

【JavaScript】if语句

JS中的程序是从上到下一行一行执行的。通过流程控制语句可以控制程序执行流程，使程序可以根据一定的条件来选择执行语句。语句的分类： 1、条件判断语句 2、条件分支语句 3、循环语句条件判断语句：使用条件判断语句可以在执行某个语句之前进…...

编程日记 2025/4/29 11:32:50

PostgreSQL oracle_fdw 扩展解析

PostgreSQL oracle_fdw 扩展解析 oracle_fdw 是 PostgreSQL 的一个外部数据包装器(Foreign Data Wrapper)扩展，允许 PostgreSQL 直接连接和操作 Oracle 数据库。以下是全面详细的使用指南： 一、安装与配置 1. 前置要求 Oracle 客户端库：必…...

编程日记 2025/4/29 11:32:47

从信息传输到智能互动，融云的全球智能通信云服务进化

4 月 24 日-25 日，GTC2025 全球流量大会在深圳福田会展中心举办，融云携全球智能通信云解决方案亮相。在大会首日的开幕式峰会上，融云高级研发总监李宏博受邀分享《从信息传输到智能互动，融云的全球智能通信云服务进化》。作为连…...

编程日记 2025/5/10 12:56:15

关于https请求丢字符串导致收到报文解密失败问题

加密方法：AES两次URLEncoder 问题现象：服务端收到的报文中少了类似%25这样的字符，导致解密失败问题分析：用RequestBody接受也有可能是springboot自动做了一次解码URLDecoder，自己只需要解码一次就好了...

编程日记 2025/4/29 11:31:41

Rust 学习笔记：修复所有权常见错误

Rust 学习笔记：修复所有权常见错误 Rust 学习笔记：修复所有权常见错误错误一：返回栈上的引用错误二：没有足够的权限错误三：别名和可变性错误四：从集合中拷贝一个元素（转移所有权）错误…...

编程日记 2025/4/29 11:31:39

Unity3D引擎框架及用户接口调用方式相关分析及汇总

分析目的目前外网3D手游绝大部基于Unity3D引擎进行开发，Unity3D引擎属于商业引擎，引擎整理框架的运行机制较为神秘，本文介绍Unity引擎框架、对象组织方式、用户接口与引擎交互方式等原理，通过本文的分析和介绍可了解Unity3D框架中大致执行原理。实现原理 Unity引擎作为…...

编程日记 2025/4/29 11:30:35

喷泉码在物联网场景下的案例分析

在物联网复杂场景下，无线传感器网络作为信息感知前端，面临能量受限、信道不稳定、多跳传输可靠性差等难题，严重制约物联网系统运行效能。传统基于反馈重传的通信机制在无线传感器网络中难以为继。其 ACK 确认操作频繁，大幅增加能耗，且在动态网络拓扑中，反馈易丢失，致使数…...

编程日记 2025/4/29 11:30:34

OpenCV 图形API（69）图像与通道拼接函数------将一个 GMat 类型的对象转换为另一个具有不同深度GMat对象函数convertTo()

操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述将一个矩阵转换为另一种数据深度，并可选择进行缩放。该方法将源像素值转换为目标数据深度。最终应用 saturate_cast<> 以避免…...

编程日记 2025/5/20 10:56:34

考研系列-计算机组成原理第七章、输入/输出系统

一、I/O接口 1.I/O接口概念现在的I/O接口有些集成在南桥芯片上...

编程日记 2025/4/29 11:29:29

使用vue3 脚手架创建项目

1.创建项目并运行 1.1 创建项目 vue create abcd 1.2 运行创建好项目后，命令行会提示你运行项目 npm run serve 2.介绍各个目录 node_modules : 项目依赖包，其中包括很多基础依赖，自己也可以根据需要安装其他依赖 assets文件夹&a…...

编程日记 2025/4/29 11:29:28

云服务器被黑客攻击应急响应与加固指南（上）

一、入侵检测与应急处理 1. 异常行为检测 # 查看异常登录记录 sudo lastb | awk {print $3} | sort | uniq -c | sort -nr sudo grep "Failed password" /var/log/auth.log | awk {print $11} | sort | uniq -c# 检查可疑进程 ps auxf | grep -E (curl|wget|bash|s…...

编程日记 2025/4/29 11:28:26

联合体union的特殊之处

一个联合体union的长度等于其内部长度最大的成员的长度。 union的所有成员共享同一块内存空间，可以利用这个特性读取数据的字节存储方式。 #include <stdio.h>int check_endian() {union {short s; // 2 字节（short）char c[2]…...

编程日记 2025/5/5 7:26:59

Spring系列五：手动实现Spring底层机制第三部分

💗实现任务阶段5 🍚bean后置处理器实现 bean后置处理器实现思路:先完成原生Spring 使用Bean后置处理器的案例, 然后实现自己的bean后置处理器 bean的生命周期~传送门在idea中 shortcuts: shiftshift , 输入 InitializingBean, 搜索. 在zzw-spring…...

编程日记 2025/5/4 19:49:50

AGV、AMR机器人控制器x86/RK3588/NV各有什么优劣势？

以下是关于AGV/AMR机器人控制器解决方案中x86、RK（瑞芯微）、NV（英伟达）平台优劣势的综合分析： 一、核心性能对比平台优势局限性适用场景‌x86‌1. 多核高频CPU支持复杂算法运算，适合大规模路径规划及多机…...

编程日记 2025/5/11 16:55:06

[ACTF2020 新生赛]Include [ACTF2020 新生赛]Exec

[ACTF2020 新生赛]Include 因为前端过滤的太多了所以直接使用日志包含搞包含这个 /var/log/nginx/access.log [ACTF2020 新生赛]Include蚁剑连接翻看 flag{1ce7a81e-0339-44ef-a398-a7784d3efe37} [ACTF2020 新生赛]Exec [ACTF2020 新生赛]Exec 127.0.0.1 |echo <?…...

编程日记 2025/4/29 11:26:12

23种设计模式 -- 工厂模式

Java 工厂模式示例代码下面我将展示三种常见的工厂模式实现：简单工厂模式、工厂方法模式和抽象工厂模式。 1. 简单工厂模式 java // 产品接口 interface Shape {void draw(); }// 具体产品类 class Circle implements Shape {Overridepublic void draw() {System…...

编程日记 2025/4/29 11:25:09

【25软考网工】第四章（2）WLAN通信技术、WLAN频谱与信道

目录一、WLAN通信技术 1. 扩展频谱通信 1）扩频通信种类 2）技术关系 2. 应用案例 1）例题:扩频通信概念判定 2）例题:跳频扩频技术描述 3）例题:扩频通信技术标准 3.知识小结二、WLAN频谱与信道 1. WLAN网络分…...

编程日记 2025/5/13 9:08:13

MetaEditor - 自动交易和技术指标编辑器

功能特点代码编辑功能：支持多种编程语言，如 MQL4 和 MQL5，方便交易者根据自己的需求编写自动交易策略和技术指标。它提供了代码高亮、自动缩进、语法检查等功能，有助于提高代码编写的效率和准确性。调试与测试工具：配…...

编程日记 2025/5/8 10:40:06

关于华为云OneAccess登录认证过程介绍

这里主要介绍的是OAuth2认证的一个流程，分享一下实际开发过程中的实现逻辑 1、后端先根据接口文档的细节内容，然后拼接好url并且以String的类型返回给前端 2、此时前端会访问本连接，然后就会跳转到第三方页面，用户进行登录后&am…...

编程日记 2025/4/29 11:20:53

Spring - 简单实现一个 Spring 应用

一、为什么需要学习Spring框架？ 1.企业级开发标配超过60%的Java项目都使用Spring生态（数据来源：JetBrains开发者报告）。 2.简化复杂问题通过IoC和DI，告别new关键字满天飞的代码。 3.职业竞争力几乎所有Java岗…...

编程日记 2025/4/29 11:20:52

数据展示功能界面设计与实现及终端控制界面思路（17）

文章目录一、本章说明二、传感数据展示功能实现2.1 实现目标2.2 具体实现2.2.1 需要在.pro 文件添加2.2.2 mainwindow.h 头文件2.2.3 mainwindow.cpp 文件2.2.4 实现界面展示三、项目源码文件四、终端节点控制五、Qt打包EXE一、本章说明注：本节为【基于STM的环境监测系统（…...

编程日记 2025/5/5 8:00:18