Vue 3 的到来，不仅带来了性能的提升，更带来了代码风格的革新！曾经熟悉的 keyCode、v-on.native、过滤器(filter) 和 $listeners 都已成为过去式。今天，就让我们跟随 Vue 3 的步伐，告别这些“旧爱”，拥抱更简洁、高效的新语法！

keyCode和config.keyCodes退出历史舞台

Vue 3 彻底移除了 keyCode 作为 v-on 的修饰符，同时也不再支持 config.keyCodes。为了处理键盘事件，建议使用标准的 KeyboardEvent.key 属性。

旧爱：

<template>
  <input @keyup.enter="handleEnter" />
</template>

新欢:

<template>
  <input @keyup="handleKeyup" />
</template>

<script>
export default {
  methods: {
    handleKeyup(event) {
      if (event.key === 'Enter') {
        // 处理 Enter 键
      }
    }
  }
};
</script>

代码解析：

• 使用 @keyup 监听键盘弹起事件。
• 在事件处理函数中，通过判断 event.key 的值来识别不同的按键。

v-on.native挥泪告别

在 Vue 3 中，v-on.native 修饰符也被移除。对于自定义组件，可以通过 emits 选项显式地声明要触发的事件，然后在父组件中直接监听即可。

父组件：

<template>
  <MyComponent @click="handleClick" @close="handleClose" />
</template>

子组件：

<template>
  <button @click="$emit('close')">关闭</button>
</template>

<script>
export default {
  emits: ['close']
};
</script>

代码解析：

• 父组件可以直接监听子组件 emits 选项中声明的自定义事件。

过滤器（filter）光荣退休

Vue 3 移除了过滤器，建议使用计算属性或方法来替代。

旧爱：

{{ message | capitalize }}

新欢：

<template>
  <p>{{ capitalizedMessage }}</p>
</template>

<script>
export default {
  computed: {
    capitalizedMessage() {
      return this.message.charAt(0).toUpperCase() + this.message.slice(1);
    }
  }
};
</script>

代码解析：

• 使用计算属性 capitalizedMessage 来处理字符串首字母大写。

$listeners功成身退

Vue 3 中移除了 $listeners，事件监听器现在作为 onXxx 属性传递给子组件。

父组件：

<MyComponent @close="handleClose" />

子组件：

<template>
  <div v-bind="$attrs">
    <!-- ... -->
  </div>
</template>

<script>
export default {
  setup(props, { attrs }) {
    console.log(attrs.onClose); // 打印 onClose 事件处理函数
  }
};
</script>

代码解析：

• 子组件可以通过 $attrs 访问到父组件传递的事件监听器。

总结：

Vue 3 的这些变化，虽然让我们告别了一些熟悉的语法，但也为我们带来了更清晰、简洁、易于理解的代码风格。拥抱变化，不断学习，才能在前端开发的道路上越走越远！

#头条挑创作挑战赛##程序员##互联网#