vue3删了什么东西

Vue 3删除了哪些内容？

Vue 3 删除了一些在 Vue 2 中存在的特性和功能，这些删除主要是为了提升性能、简化代码和提高开发体验。1、移除了实例方法，2、移除了一些指令，3、移除了部分API。这些删除对于开发者来说意味着需要调整现有代码，但也带来了更高效和现代化的开发体验。

一、移除了实例方法

在 Vue 3 中，一些实例方法被移除或替换为新的 API。以下是几个被移除的实例方法：

$on、$off 和 $once
$set 和 $delete

$on、$off 和 $once

这些方法用于在 Vue 2 中处理自定义事件，但在 Vue 3 中被移除了。替代方案是使用组合式 API（Composition API）或 Vue 3 的事件系统。

$set 和 $delete

在 Vue 2 中，$set 和 $delete 用于处理响应式对象的属性添加和删除。在 Vue 3 中，这两个方法被移除了，因为 Vue 3 的响应式系统更加强大，不再需要这些辅助方法。

// Vue 2 中使用 $set
this.$set(this.someObject, 'newKey', 'newValue');
// Vue 3 中直接设置
this.someObject.newKey = 'newValue';

二、移除了部分指令

Vue 3 还移除了一些在 Vue 2 中存在的指令，主要是为了简化框架并提升性能。

v-on.native
v-bind.sync

v-on.native

在 Vue 2 中，v-on.native 用于在子组件上监听原生 DOM 事件。在 Vue 3 中，这个指令被移除了，开发者需要通过事件代理或在根元素上直接监听事件。

<!-- Vue 2 中使用 v-on.native -->
<child-component v-on:native:click="handleClick"></child-component>
<!-- Vue 3 中直接在根元素上监听 -->
<child-component @click="handleClick"></child-component>

v-bind.sync

在 Vue 2 中，v-bind.sync 用于双向绑定父组件和子组件之间的属性。在 Vue 3 中，这个指令被移除了，推荐使用更明确的事件和属性绑定。

<!-- Vue 2 中使用 v-bind.sync -->
<child-component :prop.sync="parentData"></child-component>
<!-- Vue 3 中使用事件和属性绑定 -->
<child-component :prop="parentData" @update:prop="val => parentData = val"></child-component>

三、移除了部分API

一些在 Vue 2 中存在的 API 在 Vue 3 中被移除或替换，以下是几个重要的变化：

过滤器（Filters）
事件总线（Event Bus）
内联模板（Inline Templates）

过滤器（Filters）

在 Vue 2 中，过滤器用于在模板中格式化文本。然而，过滤器在 Vue 3 中被移除了，推荐使用方法或计算属性来实现相同的功能。

<!-- Vue 2 中使用过滤器 -->
<p>{{ message | capitalize }}</p>
<!-- Vue 3 中使用方法 -->
<p>{{ capitalize(message) }}</p>
<script>
export default {
  methods: {
    capitalize(value) {
      return value.charAt(0).toUpperCase() + value.slice(1);
    }
  }
}
</script>

事件总线（Event Bus）

在 Vue 2 中，事件总线用于跨组件通信，但在 Vue 3 中被移除了，推荐使用 Vuex 或者组合式 API 来管理状态和事件。

// Vue 2 中使用事件总线
const bus = new Vue();
bus.$emit('event', data);
// Vue 3 中使用组合式 API 或 Vuex
import { provide, inject } from 'vue';
const EventBusSymbol = Symbol();
export function provideEventBus() {
  provide(EventBusSymbol, bus);
}
export function useEventBus() {
  return inject(EventBusSymbol);
}

内联模板（Inline Templates）

在 Vue 2 中，内联模板通过 inline-template 属性定义，但在 Vue 3 中被移除了。推荐使用插槽或组件模板来代替。

<!-- Vue 2 中使用内联模板 -->
<child-component inline-template>
  <div>{{ message }}</div>
</child-component>
<!-- Vue 3 中使用插槽 -->
<child-component>
  <template #default="{ message }">
    <div>{{ message }}</div>
  </template>
</child-component>

四、其他移除的特性和功能

除了上述主要变化外，Vue 3 还移除了其他一些特性和功能，以进一步优化框架。

inline-template
keyCode 支持

inline-template

在 Vue 2 中，inline-template 用于定义内联模板，但在 Vue 3 中被移除了。推荐使用插槽或组件模板来实现相同的功能。

<!-- Vue 2 中使用 inline-template -->
<child-component inline-template>
  <div>{{ message }}</div>
</child-component>
<!-- Vue 3 中使用插槽 -->
<child-component>
  <template #default="{ message }">
    <div>{{ message }}</div>
  </template>
</child-component>

keyCode 支持

在 Vue 2 中，v-on 支持 keyCode 来监听键盘事件，但在 Vue 3 中被移除了，推荐使用键名或 KeyboardEvent.key。

<!-- Vue 2 中使用 keyCode -->
<input @keyup.13="submitForm">
<!-- Vue 3 中使用键名 -->
<input @keyup.enter="submitForm">

总结和建议

Vue 3 的这些删除和改进旨在提高框架性能、简化代码和提升开发体验。开发者在升级到 Vue 3 时，需要注意以下几点：

熟悉新的组合式 API：组合式 API 提供了更灵活和强大的状态管理和逻辑复用能力。
调整代码以适应新的指令和方法：学习新的事件处理和属性绑定方法，替代已移除的指令和实例方法。
使用 Vuex 或其他状态管理库：在复杂的应用中，使用 Vuex 或其他状态管理库来替代事件总线，实现更清晰和可维护的状态管理。

通过这些调整，开发者可以充分利用 Vue 3 提供的新特性和改进，构建更高效和现代化的前端应用。