vue2和vue3的组件API变化

### Vue2 和 Vue3 组件 API 的变化

#### Props 属性传递方式改进
在 Vue3 中，`props` 定义变得更加灵活。现在支持使用 JavaScript 类型推断来简化 `props` 声明语法[^1]。

// Vue 2.x props定义方式
export default {
  props: {
    title: String,
    likes: Number,
    isPublished: Boolean,
    commentIds: Array,
    author: Object,
    callback: Function,
    contactsPromise: Promise // or any constructor function
  }
}

// Vue 3.x 改进后的props定义方式
import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    title: String, // 更简洁的写法
    count: {
      type: Number,
      required: true,
      validator(value) {
        return value >= 0;
      }
    }
  }
})

#### Composition API 提升代码复用性
Vue3 引入了全新的组合式 API (Composition API)，这使得开发者可以更方便地组织和重用逻辑代码片段[^2]。

<script setup>
import { ref, onMounted } from 'vue';

const message = ref('Hello World');

onMounted(() => {
  console.log(message.value);
});
</script>

<template>
  <div>{{ message }}</div>
</template>

#### $attrs 处理未声明属性的新方法
对于 `$attrs` 对象的应用场景，在 Vue3 中可以直接通过模板中的特殊指令 `v-bind="$attrs"` 将其应用到根节点上[^3]。

<!-- 子组件 -->
<p v-bind="$attrs">这是子组件的内容。</p>

#### 父子组件间通信机制优化
为了更好地处理父子组件间的交互，Vue3 推荐采用基于事件的方式进行双向通讯，并且增强了对动态绑定的支持[^5]。

<!-- 父组件 -->
<ChildComponent :customData="parentValue" @childEvent="handleChildEvent"/>

<!-- 子组件 -->
<button @click="$emit('childEvent', someValue)">点击触发事件给父级</button>