Vue 3 新增组件功能

Fragment

• 在 Vue2 中：组件必须有一个根标签
• 在 Vue3 中： 组件可以没有根标签，内部会将多个标签包含在一个 Fragment 虚拟元素中。

使用 Fragment 的好处：减少标签层级，减少内存占用。

Teleport

• 将组件 HTML 结构移动到指定位置。

<teleport to="移动位置">

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

to 中的参数可以是 HTML 标签，例如 body ， @test ， .test 。

Suspense

在 Vue 中组件模版渲染时，默认一个组件引入一个组件是一起渲染模版出来的（静态引入，容易引发当引入的组件有问题，当前组件加载连带出错变慢加载）。当异步引入组件时，模版分别渲染。

• 作用：等待异步组件时渲染一些额外内容（ef 插槽），让应用有更好的用户体验。

• 使用步骤：

  • 异步引入组件：

    import {defineAsyncComponent} from "vue";
    const Child = defineAsyncComponent(() => import('./components/Child')) // 动态（异步）引入
    

  • 使用 Suspend 标签包裹两个插槽模版， default 和 fallback ：

    <Suspense>
      <template v-slot:default>
        <Child/>
      </template>
      <template v-slot:fallback>
        <h3>加载中...</h3>
      </template>
    </Suspense>
    

Vue 3 其他更新

全局 API 转移

• Vue 2.x 有许多全局 API 和配置。

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

    //注册全局组件
    Vue.component('MyButton', {
      data: () => ({
        count: 0
      }),
      template: '<button @click="count++">Clicked {{ count }} times.</button>'
    })
    
    //注册全局指令
    Vue.directive('focus', {
      inserted: el => el.focus()
    }
    

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

  • 将全局的 API 调整到应用实例（ app ）上：

2.x 全局 API（ Vue ）	3.x 实例 API ( app )
Vue.config.xxxx	app.config.xxxx
Vue.config.productionTip	移除
Vue.component	app.component
Vue.directive	app.directive
Vue.mixin	app.mixin
Vue.use	app.use
Vue.prototype	app.config.globalProperties

其他改变

1. 对于 data 配置项应该始终被声明为一个函数（不能为对象）。

2. 动画与过渡相关的类名称更改：

   Vue 2.x 写法：

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

   Vue 3.x 写法：

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

3. 移除了 keyCode （兼容性较差）作为 v-on 的修饰符，同时也不再支持 config.keyCodes （按键编码相关）

4. 移除了 v-on.native 修饰符（组件绑定自定义事件），修改为以下写法：（不声明的自定义事件即为原生 DOM 事件）

   父组件中绑定事件

   <my-component
     v-on:close="handleComponentEvent"
     v-on:click="handleNativeClickEvent"
   />
   

   子组件中声明自定义事件

   <script>
     export default {
       emits: ['close']
     }
   </script>
   

5. 移除了过滤器 filter ：

提示

过滤器虽然这看起来很方便，但它需要一个自定义语法，打破大括号内表达式是 “只是 JavaScript” 的假设，这不仅有学习成本，而且有实现成本！建议用方法调用或计算属性去替换过滤器。