十二、Vue3新改变

（一）Composition API 的优势

1.Options API（选项式 API）存在的问题

• 使用传统 Options API 时，新增或者修改一个需求，就需要分别在 data、methods、computed 里面修改
• https://cn.vuejs.org/guide/introduction.html#api-styles

2.Composition API（组合式 API）的优势

• 可以更加优雅地组织代码、函数，让相关功能的代码更加有地组织在一起
• https://www.vuemastery.com/courses/vue-3-essentials/why-the-composition-api/

（二）Vue3 中新的组件

1.Fragment 组件

1）在 Vue2 中

• 组件必须有一个根标签

2）在 Vue3 中

• 组件可以没有根标签
• 内部会将多个标签包裹在一个 Fragment 虚拟元素中

3）好处

• 减少标签层级
• 减小内存占用

2.Teleport 组件

1）定义

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

2）使用

• 移动位置：
  • 表示要把包裹的 HTML 结构插入到哪里
• 可选值：
  • HTML 元素：如：body、html
  • id 选择器：如：#test等

<teleport to="移动位置">
  <div v-if="isShow" class="mask">
    <div class="dialog">
      <h3>我是一个弹窗</h3>
      <button @click="isShow = false">关闭弹窗</button>
    </div>
  </div>
</teleport>

3.Suspense 组件

1）定义

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

2）使用

• 异步引入组件

import { defineAsyncComponent } from "vue";
const Child = defineAsyncComponent(() => import("./components/Child.vue"));

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

<template>
  <div class="app">
    <h3>我是App组件</h3>
    <Suspense>
      <template v-slot:default>
        <Child />
      </template>
      <template v-slot:fallback>
        <h3>稍等，加载中......</h3>
      </template>
    </Suspense>
  </div>
</template>

3）让组件加载缓慢的原因

• 网速缓慢
• 异步组件 setup 返回的是 Promise 对象

（三）Vue3 中一些其他改变——全局 API 的转移

1.Vue2.x 有许多全局 API 和配置

• 如：注册全局组件、注册全局指令等

1）注册全局组件

Vue.component("MyButton", {
  data: () => ({
    count: 0,
  }),
  template: '<button @click="count++">Clicked {{ count }} times.</button>',
});

2）注册全局指令

Vue.directive("focus", {
  inserted: (el) => el.focus(),
});

2.Vue3.0 中对这些 API 做出了调整

• https://cn.vuejs.org/api/application.html

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

2.x 全局 API（Vue）	3.x 实例 API（app）
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

2）其它改变

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

/* Vue2.x 写法 */
.v-enter,
.v-leave-to {
  opacity: 0;
}
.v-leave,
.v-enter-to {
  opacity: 1;
}

/* Vue3.x 写法 */
.v-enter-from,
.v-leave-to {
  opacity: 0;
}
.v-leave-from,
.v-enter-to {
  opacity: 1;
}

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

<!-- Vue2.x 写法 -->
<button @click.native="addNum"></button>

<!-- Vue3.x 写法【根据子组件声明决定是否绑定原生事件】 -->
<!-- 父组件中绑定事件 -->
<my-component v-on:close="handleComponentEvent" v-on:click="handleNativeClickEvent" />
<!-- 子组件中声明自定义事件 -->
<script>
  export default {
    emits: ["close"],
  };
</script>

• 移除 过滤器（filter）

过滤器虽然看起来很方便，但它需要一个自定义语法

打破大括号内表达式是“只是 JavaScript”的假设

这不仅有学习成本，而且有实现成本

建议用方法调用或计算属性去替换过滤器