vue3中新增了很多功能，整理一下

一：Composition API（组合式 API）

使得组件的逻辑更加灵活和可组合。通过 setup() 函数提供了一种逻辑组织组件代码的方式

二：createApp

由vue2的new Vue->createApp

 const app = new Vue({/**选项**/})  //v2
  const app = createApp({/**选项**/}) //v3

三：多事件

 <button @click="one($event),two($event)">提交</button>

四：Fragment

vue2组件只能一个根节点，vue3可以多个(隐式的创建一个)

<!-- vue2 -->
	  <template>
		  <div>
			  <h2>{{title}}</h2>
			  <p>test</p>
		  </div>
	  </template>

	  <!-- vue3：不在使用div节点包裹 -->
	  <template>
		  <h2>{{title}}</h2>
		  <p>test</p>
	  </template>

五：移除.sync

.sync 是一个修饰符，用于实现父组件和子组件之间的双向绑定。简化父组件传递数据给子组件并接收子组件对数据的修改的操作

vue2会自动生成一个名为 update:xxx 的自定义事件，并且在子组件中触发该事件来通知父组件修改数据

<!-- vue2 -->
	  <MyComponent :title.sync="title" />

	  <!-- vue3 简写 -->
	  <MyComponent v-model:title="title" />
	  <!-- 非简写 -->
	  <MyComponent :title="title" @update:title="title = $event" />
	  

六：异步组件的写法

vue3中引入defineAsyncComponent函数来引入异步组件

// vue2写法
	  new Vue({
		  components: {
			  'my-component': ()=>import('./my-component.vue')
		  }
	  })
	  import {createApp, defineAsyncComponent} from 'vue'

	  export default {
		  components: {
			  AsyncComponent: defineAsyncComponent(()=>import('./AsyncComponent.vue'))
		  }
	  }

七：移除过滤器（filter）

 <div v-bind:id="rawId | formatId"></div>

八：Teleport（传送门）

可以传送到任何位置，避免了vue2中层级遮挡问题

<button @click="modalOpen = true">
	   open
	  </button>

	  <!-- 通过teleport把弹窗放到body下 -->
	  <teleport to="body">
	   <div v-if="modalOpen" classs="modal">
		 <div>
		   teleport弹窗，父元素是body
		   <button @click="modalOpen = false">close</button>
		 </div>
	   </div>
	  </teleport>

九：Suspense（暂停）

用于处理异步组件的加载状态和错误处理。提供了更简洁和灵活的方式来处理异步组件的加载和错误情况

<Suspense>
	   <template>
		  <!-- 异步组件 -->
		 <Test1 />
	   </template>
	   <!-- fallback是一个具名插槽，即Suspense内部有两个slot，一个具名插槽fallback -->
	   <template #fallback>
		  loading...
	   </template>
	  </Suspense>

十：emits属性

用于声明组件可以触发的自定义事件。是一个数组或对象，用于指定组件可以触发的事件名称

提供更好的类型检查和自动完成，以及在编写组件时明确指定组件所触发的事件。有助于改善代码的可维护性和可读性

 <Hello :msg="msg" @onSayHello="sayHello">

	  // 子组件
	  export default {
		  name: 'Hello',
		  props: {
			  msg: String
		  },
		  emits: ['onSayHello'], // 声明emits
		  setup(props, {emit}) {
			  emit('onSayHello', 'aaa')
		  }
	  }