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

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

news 2025/4/29 11:56:35

以下是 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 变化后）