Vue3中哪些API被废弃了？

在本篇博客中，我们将探讨Vue3中已经被废弃的API，以帮助前端开发者了解在升级Vue版本时需要注意的变化。Vue3作为Vue.js的最新版本，引入了许多令人振奋的新特性，但也意味着一些旧的API已被废弃。让我们一起来看一下究竟哪些API在Vue3中被废弃了。

1. $on, $off 和 $once：
   在Vue2中，我们可以使用$on来监听事件，$off来取消监听，$once则只监听一次事件。然而，在Vue3中，这些API已经被废弃。取而代之的是使用新的Composition API中提供的onMounted和onUnmounted来监听和取消事件。

示例代码：

// Vue2中的用法
this.\$on('event', handler);
this.\$off('event', handler);
this.\$once('event', handler);

// Vue3中的改写方式
import { onMounted, onUnmounted } from 'vue';

onMounted(() => {
  // 监听事件的处理逻辑
});

onUnmounted(() => {
  // 取消监听事件的处理逻辑
});

2. $watch：
   在Vue2中，我们可以使用$watch来监视数据的变化。然而，在Vue3中，$watch已经被废弃，取而代之的是使用新的watchEffect和watch来进行数据的监控。

示例代码：

// Vue2中的用法
this.\$watch(() => this.value, newValue => {
  console.log('新值：', newValue);
});

// Vue3中的改写方式
import { watch, watchEffect } from 'vue';

watch(() => this.value, newValue => {
  console.log('新值：', newValue);
});

3. $attrs 和 $listeners：
   在Vue2中，我们可以使用$attrs和$listeners来在组件中访问父组件传递的属性和事件监听器。然而，在Vue3中，$attrs和$listeners这两个API已经被废弃，取而代之的是使用…attrs和…listeners来访问这些属性和事件监听器。

示例代码：

// Vue2中的用法
<template>
  <child-component v-bind=\$attrs v-on=\$listeners />
</template>

// Vue3中的改写方式
<template>
  <child-component ...\$attrs ...\$listeners />
</template>

总结：
Vue3带来了许多令人兴奋的新特性和改进，但也意味着一些旧的API已经被废弃。在升级Vue版本时，开发者需要注意这些API的变化，并及时调整代码以适配新版本的Vue。通过熟悉新的Composition API和其他新特性，我们可以更好地利用Vue3的强大功能来构建优秀的前端应用。

更多面试题请点击：web前端高频面试题_在线视频教程-CSDN程序员研修院

最后问候亲爱的朋友们，并邀请你们阅读我的全新著作