新增emits选项

Vue 3 现在提供一个 emits 选项，和现有的 props 选项类似。这个选项可以用来定义一个组件可以向其父组件触发的事件

<template>
  <div>
    <p>{{ text }}</p>
    <button v-on:click="$emit('accepted')">OK</button>
  </div>
</template>
<script>
  export default {
    props: ['text'],
    emits: ['accepted']
  }
</script>

按键修饰符

• 不再支持使用数字 (即键码) 作为 v-on 修饰符
• 不再支持 config.keyCodes

现在建议对任何要用作修饰符的键使用 kebab-cased (短横线) 名称

<input v-on:keyup.page-down="nextPage">

过渡的 class 名更改

过渡类名 v-enter 修改为 v-enter-from、过渡类名 v-leave 修改为 v-leave-from。

.v-enter-from,
.v-leave-to {
  opacity: 0;
}

.v-leave-from,
.v-enter-to {
  opacity: 1;
}

# v-if 与 v-for 的优先级对比

在2.x版本中，在一个元素上同时使用 v-if 和 v-for 时，v-for 会优先作用，在3.x版本中，v-if 总是优先于 v-for 生效

Data 选项

组件选项 data 的声明不再接收纯 object，在 3.x 中，data 选项已标准化为只接受返回 object 的 function

<script>
  import { createApp } from 'vue'

  createApp({
    data() {
      return {
        apiKey: 'a1b2c3'
      }
    }
  }).mount('#app')
</script>