以下是 Vue 2 和 Vue 3 中 Vue 实例变量方法的功能差异对比，包含关键方法的详细说明和表格总结：
核心方法对比
1. $mount()
| Vue 2 | Vue 3 |
|---|
| 作用：手动挂载实例到 DOM 元素 | 作用：手动挂载 App 实例到 DOM 元素 |
参数：element（DOM 元素或选择器字符串） | 参数：element（DOM 元素或选择器字符串） |
| 返回值：Vue 实例 | 返回值：根组件实例 |
示例：vm.$mount('#app') | 示例：app.mount('#app') |
差异：Vue 3 的 mount 是 App 实例方法，而非组件实例方法 | |
2. $destroy()
| Vue 2 | Vue 3 |
|---|
| 作用：销毁 Vue 实例，停止监听和事件 | 作用：销毁组件实例，停止响应式更新 |
| 参数：无 | 参数：无 |
示例：vm.$destroy() | 示例：vm.$destroy() |
差异：Vue 3 中仍可用，但需注意组件销毁时的生命周期钩子（如 onUnmounted） | |
3. 事件系统（$on, $once, $off, $emit）
| Vue 2 | Vue 3 |
|---|
$on：在实例上监听事件 | $on：仍可用，但推荐使用 setup 和 onMounted 等 Composition API |
$emit：触发当前组件事件 | $emit：仍可用，但事件系统更灵活（如通过 defineEmits 定义） |
差异：Vue 3 推荐使用 setup 中的 emit 函数，而非直接调用 $emit | |
4. $watch()
| Vue 2 | Vue 3 |
|---|
| 作用：监听数据变化 | 作用：监听响应式数据（推荐使用 watch 钩子） |
参数：expression, callback | 参数：source, callback（需通过 watch 函数） |
示例：vm.$watch('count', callback) | 示例：watch(() => state.count, callback) |
差异：Vue 3 中 watch 是全局函数，需在 setup 中调用 | |
5. $set 和 $delete
| Vue 2 | Vue 3 |
|---|
| 作用：添加/删除响应式属性 | 作用：Vue 3 推荐使用 reactive 或 ref 直接操作，无需 $set |
替代方案：Vue 3 中直接通过 proxy 操作对象属性即可触发响应式更新 | |
差异：Vue 3 中 $set 和 $delete 仍然可用，但更推荐直接操作响应式对象 | |
6. $nextTick()
| Vue 2 | Vue 3 |
|---|
| 作用：DOM 更新后执行回调 | 作用：仍可用，但返回 Promise（Vue 2 需第三方 polyfill） |
示例：vm.$nextTick(() => { ... }) | 示例：await nextTick()（在 setup 中使用） |
差异：Vue 3 中 nextTick 是全局函数，无需通过实例调用 | |
7. $forceUpdate()
| Vue 2 | Vue 3 |
|---|
| 作用：强制重新渲染 | 作用：仍可用，但 Vue 3 的响应式系统更智能，通常无需调用 |
差异：Vue 3 推荐通过 ref 或 reactive 直接触发更新 | |
8. 全局注册方法（Vue 2 静态方法 vs Vue 3 App 实例方法）
| Vue 2 | Vue 3 |
|---|
Vue.component()：注册全局组件 | app.component()：通过 App 实例注册全局组件 |
Vue.directive()：注册全局指令 | app.directive()：通过 App 实例注册全局指令 |
Vue.mixin()：注册全局混入 | app.mixin()：通过 App 实例注册全局混入 |
| 差异：Vue 3 将全局注册方法移到了 App 实例上，不再通过 Vue 静态方法 | |
9. 插件安装（Vue.use() vs app.use()）
| Vue 2 | Vue 3 |
|---|
Vue.use(plugin)：安装插件到全局 | app.use(plugin)：安装插件到 App 实例 |
| 差异：Vue 3 中插件需通过 App 实例安装 | |
Vue 3 新增方法
| 方法 | 作用 | 示例 |
|---|
app.component() | 注册全局组件 | app.component('MyButton', MyButtonComponent) |
app.directive() | 注册全局指令 | app.directive('focus', { mounted: el => el.focus() }) |
app.provide() | 提供响应式数据给后代组件 | app.provide('user', reactive({ name: 'Alice' })) |
app.mount() | 挂载 App 实例到 DOM | app.mount('#app') |
app.unmount() | 卸载 App 实例 | app.unmount() |
对比表格总结
| 方法 | Vue 2 | Vue 3 | 关键差异 |
|---|
$mount | 实例方法，手动挂载到 DOM | App 实例方法，挂载到 DOM | Vue 3 的 mount 需通过 App 实例调用，返回根组件实例 |
$destroy | 销毁 Vue 实例 | 销毁组件实例 | 生命周期钩子需用 onUnmounted 等 Composition API |
| 事件系统 | $on/$emit 在实例上监听/触发事件 | 推荐使用 setup 中的 emit 函数，事件更灵活 | Vue 3 推荐 Composition API 和 defineEmits 定义事件 |
$watch | 监听数据变化，需通过实例调用 | 使用 watch 全局函数，需在 setup 中调用 | Vue 3 的 watch 更灵活，支持多个源和深度监听 |
$set/$delete | 向对象添加/删除响应式属性 | 直接操作响应式对象（如 reactive），无需 $set | Vue 3 的响应式系统更智能，直接操作对象即可触发更新 |
$nextTick | 返回回调函数，需通过实例调用 | 返回 Promise，可通过 await 使用 | Vue 3 的 nextTick 是全局函数，无需通过实例调用 |
$forceUpdate | 强制渲染 | 仍可用，但推荐通过响应式系统触发更新 | Vue 3 的响应式系统更强大，减少强制更新的需求 |
| 全局注册 | 通过 Vue.component/directive/mixin 静态方法 | 通过 App 实例的 component/directive/mixin 方法 | Vue 3 将全局注册移到 App 实例，避免全局污染 |
| 插件安装 | Vue.use() 全局安装插件 | app.use() 在 App 实例上安装插件 | Vue 3 插件作用域更明确，避免全局副作用 |
迁移建议
- 全局注册：Vue 3 中需通过
app.component/directive/mixin 替代 Vue 2 的静态方法。 - 事件系统：优先使用 Composition API 的
defineEmits 和 emit 函数。 - 响应式操作：直接操作
reactive 或 ref 对象，无需 $set。 - 生命周期：用
onMounted、onUnmounted 等钩子替代 $destroy 和 $mount 的部分逻辑。 - 插件安装：通过
app.use() 安装插件，确保作用域清晰。
如果需要更具体的代码示例或迁移步骤，请进一步说明！
