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

以下是 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(); // 强制重新渲染

对比表格总结

关键差异对比

使用建议

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

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