Vue3 --- 新的组件（改变）

Fragment

• 在vue2 中：组件必须有一个根标签。
• 在vue3中：组件可以没有根标签，内部会将多个标签包含在一个Fragment 虚拟元素中。
• 好处：减少标签层级，减小内存占用。

Teleport

• Teleport是一种能够将我们的组件html结构 移动到指定位置的技术。

  <teleport to="body">
  // to：看你想传送到哪里去
  .....
  这是内容
  </teleport>

Suspense

• 等待异步组件渲染一些额外内容，让应用有更好的用户体验
• 使用
  • 异步引入组件

    import { defineAsyncComponent } from 'vue'
    const Son = defineAsyncComponent(()=>import('./components/Son.vue'))

  • 使用Suspense 包裹组件，并配置好 default 与 fallback 

      <Suspense>
        <template v-slot:default>
          <Son></Son>
        </template>
        <template v-slot:fallback>
         <h3>加载中请稍后....</h3>
        </template>
      </Suspense>

其他的改变 

• 全局API（将全局API ，Vue.xxx 调整到应用实例app上

Vue 2.x	Vue 3.x
Vue.config.xxx	app.config.xxx
Vue.config.productionTip	没了
Vue.component	app.component
Vue.directive	app.directive
Vue.mixin	app.mixin
Vue.use	app.use
Vue.prototype	app.config.globalProperties

• data选项应该始终被声明为一个函数
• 过度类名的更改

  vue2

  .v-enter,

  .v-leave-to

  .v-leave

  .v-enter-to

  vue3 ：

  .v-enter-from,

  .v-leave-to

  .v-leave-from

  .v-enter-to

• 移除 keyCode 作为 v-on 的修饰符，同时也不再支持 config.keyCodes

• 移除 v-on.native 修饰符

  父组件绑定事件
  <father v-on:close="handleComponentEvent" v-on:click="handleNativeClickEvent"></father>
  
  子组件中声明自定义事件
  <script>
      export default{
  
          emits:['close']
  }
  </script>

• 移除过滤器（filiter）