Vue3中的大热门——其他技术

全局安装/配置api更改

在vue2.x中对全局属性和全局api函数是这么玩的

import vue from 'vue'
import app from './app.vue'

vue.config.ignoredelements = [/^app-/]
vue.use(/* ... */)
vue.mixin(/* ... */)
vue.component(/* ... */)
vue.directive(/* ... */)

new vue({
  render: h => h(app)
}).$mount('#app')

现在，让我们看看它如何在vue 3中运行：

import { createapp } from 'vue'
import app from './app.vue'

const app = createapp(app)

app.config.ignoredelements = [/^app-/]
app.use(/* ... */)
app.mixin(/* ... */)
app.component(/* ... */)
app.directive(/* ... */)

app.mount('#app')

您可能已经注意到，每个配置都限于使用定义的某个vue应用程序createapp。

它可以使您的代码更易于理解，并且不易出现由第三方插件引起的意外问题。当前，如果某些第三方解决方案正在修改vue对象，则可能会以意想不到的方式（尤其是全局混合）影响您的应用程序，而vue 3则无需担心。

fragment

如果您创建一个vue组件，则它只能有一个根节点。

这意味着无法创建这样的组件：

<template>
  <div>hello</div>
  <div>world</div>
</template>

原因是代表任何vue组件的vue实例都需要绑定到单个dom元素中。创建具有多个dom节点的组件的唯一方法是通过创建不具有基础vue实例的功能组件。

当前，vue 2中可以使用vue-fragments库，而在vue 3中，您可以立即使用它！
vue-fragments参考写法

<template>
		<v-fragment> 
			  <div>hello</div>
			  <div>world</div>
		</v-fragment> 
	</template>

suspense

其可以帮助我们更简易的使用异步请求及处理loading组件的展示

<suspense>
  <template >
    <suspended-component />
  </template>
  <template #fallback>
    loading...
  </template>
</suspense>

suspense可以挂起loading内容将一直显示到suspended-component完全渲染为止。挂起可以等待，直到该组件被下载（如果这是一个异步组件），或者在setup功能上执行一些异步操作。

多个v-model

v模型是一种指令，可用于在给定组件上实现双向绑定。我们可以传递反应性属性并从组件内部对其进行修改。

看看v-model：

<input v-model="property />

将以上示例重写为以下语法将具有完全相同的效果：

<input 
  v-bind:value="property"
  v-on:input="property = $event.target.value"
/>

假如我们希望用v-model同样给该元素添加 change事件、变更checked值进行绑定的话。
不幸的是，v-model每个组件只能有一个组件。

在vue 3中这不会成为问题！您将能够提供v-model属性名称，并根据需要拥有任意数量的属性。在下面，您可以v-model在表单组件中找到两个的示例：

<inviteeform
  v-model:name="username"
  v-model:email="email"
/>

portals

portals是特殊的组件，用于在当前组件之外呈现某些内容。
如果父组件有overflow: hidden 或 z-index 样式，子组件作为模态框、弹出窗口以及通常显示在页面顶部的组件的时候，可能会因为z-index不足，被其他元素覆盖，有了portals就可以放心了！

对于每个portals，我们需要指定它的目标目标，在其中将呈现portals内容。在下面，您可以看到portal-vue库的实现，vue 2中可以这么用：

<portal to="destination">
  <p>此插槽内容将呈现在name为“destination”的portal-target所在的任何位置。</p>
</portal>

<portal-target name="destination">
  <!--
  此组件可以位于应用程序中的任何位置。
  上面porta组件的槽内容将在此处呈现。
  -->
</portal-target>

vue 3将附加对portals的开箱即用支持！

新的自定义指令api

自定义指令api在vue 3中将略有变化，以更好地与组件生命周期保持一致。这项更改将使api更加直观，从而使新手更容易理解和学习api。

这是当前的自定义指令api：

const mydirective = {
  bind(el, binding, vnode, prevvnode) {},
  inserted() {},
  update() {},
  componentupdated() {},
  unbind() {}
}

……这就是vue 3中的样子。

const mydirective = {
  beforemount(el, binding, vnode, prevvnode) {},
  mounted() {},
  beforeupdate() {},
  updated() {},
  beforeunmount() {}, // new
  unmounted() {}
}

即使这是一项重大更改，也应该使用vue兼容性构建轻松涵盖。