Vue3中哪些API被废弃了？

在Vue3中，随着框架的演进和优化，一些旧的API被废弃，以支持更现代化的开发模式和更好的性能。在升级Vue版本时，了解这些变化对于保持代码的兼容性和充分利用新功能至关重要。本文将详细介绍Vue3中已经被废弃的API，并提供相应的替代方法。

1. `$on`, `$off` 和 `$once`

Vue2中的用法

在Vue2中，$on用于监听事件，$off用于取消事件监听，而$once则只监听一次事件。

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

Vue3中的替代方法

在Vue3中，这些API已被废弃。推荐使用Composition API中的onMounted和onUnmounted钩子函数来处理事件的监听和取消。

import { onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    const handler = () => {
      // 事件处理逻辑
    };

    onMounted(() => {
      window.addEventListener('event', handler);
    });

    onUnmounted(() => {
      window.removeEventListener('event', handler);
    });
  }
};

2. `$watch`

Vue2中的用法

在Vue2中，$watch方法被广泛用于监听数据的变化并触发回调。

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

Vue3中的替代方法

在Vue3中，推荐使用新的watch或watchEffect API来监控数据的变化。

import { watch, watchEffect } from 'vue';

export default {
  setup() {
    const value = ref(0);

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

    // 或者使用watchEffect
    watchEffect(() => {
      console.log('当前值：', value.value);
    });

    return { value };
  }
};

3. `$attrs` 和 `$listeners`

Vue2中的用法

在Vue2中，$attrs和$listeners分别用于访问父组件传递的属性和事件监听器，并在子组件中绑定它们。

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

Vue3中的替代方法

在Vue3中，$attrs和$listeners被合并到一起，可以通过v-bind="attrs"来传递所有非props的属性和事件监听器。

<!-- Vue3中的改写方式 -->
<template>
  <child-component v-bind="attrs" />
</template>

<script>
import { defineComponent, useAttrs } from 'vue';

export default defineComponent({
  setup() {
    const attrs = useAttrs();

    return { attrs };
  }
});
</script>

4. `filters`

Vue2中的用法

在Vue2中，filters用于模板内的简单数据格式化操作。

<!-- Vue2中的用法 -->
<template>
  <p>{{ message | capitalize }}</p>
</template>

Vue3中的替代方法

在Vue3中，filters被完全移除，推荐使用方法或计算属性来处理数据格式化。

<!-- Vue3中的替代方式 -->
<template>
  <p>{{ capitalize(message) }}</p>
</template>

<script>
export default {
  setup() {
    const message = ref('hello');

    const capitalize = (str) => {
      return str.charAt(0).toUpperCase() + str.slice(1);
    };

    return { message, capitalize };
  }
};
</script>