以下是 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()安装插件，确保作用域清晰。
如果需要更具体的代码示例或迁移步骤，请进一步说明！