Vue 3中令人激动的新功能：Fragment+Suspense+多v-model

上一篇：Vue 3中令人激动的新功能：Composition API

本文接着上文继续翻译未完的内容。

全局安装/配置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对象来提供任何配置和创建新的Vue实例。对Vue对象进行的任何更改都会影响到每个Vue实例和组件。

现在让我们来看看它在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')

正如你可能注意到的那样，现在每个配置都是用 createApp 定义的某个Vue应用程序的范围。

这可以让你的代码更容易理解，也更不容易出现由第三方插件引起的意外问题。目前，如果一些第三方的解决方案在修改Vue对象，可能会以意想不到的方式影响你的应用程序（尤其是全局mixins），这在Vue 3中是不可能的。

这个API的改变目前正在本RFC中讨论，这意味着它可能会在未来发生改变。

Fragment

在Vue 3中，我们可以期待的另一个令人兴奋的补充是Fragment。

你可能会问，什么是碎片？如果你创建一个Vue组件，那么它只能有一个根节点。

这意味着不能创建这样的组件：

<template>
  <div>Hello</div>
  <div>World</div>
</template>

原因是代表任何Vue组件的Vue实例需要绑定到一个单一的DOM元素中。唯一可以创建一个具有多个DOM节点的组件的方法就是创建一个没有底层Vue实例的功能组件。

结果发现React社区也遇到了同样的问题。他们想出的解决方案是一个名为 Fragment 的虚拟元素。它看起来差不多是这样的：

class Columns extends React.Component {
  render() {
    return (
      <React.Fragment>
        <td>Hello</td>
        <td>World</td>
      </React.Fragment>
    );
  }
}

尽管Fragment看起来像一个普通的DOM元素，但它是虚拟的，根本不会在DOM树中呈现。这样我们可以将组件功能绑定到一个单一的元素中，而不需要创建一个多余的DOM节点。

目前你可以在Vue 2中使用vue-fragments库来使用Fragments，而在Vue 3中，你将会在开箱即用!

Suspense

来自React生态系统的另一个伟大的想法将在Vue 3中采用，那就是Suspense组件。

Suspense会暂停你的组件渲染，并重现一个回落组件，直到满足一个条件。在Vue London期间，Evan You简单地触及了这个话题，并展示了我们或多或少可以期待的API。事实证明，Suspense将只是一个具有插槽的组件：

<Suspense>
  <template >
    <Suspended-component />
  </template>
  <template #fallback>
    Loading...
  </template>
</Suspense>

在Suspended-component完全渲染之前，备用内容会被显示出来。如果是异步组件，Suspense可以等待组件被下载，或者在设置函数中执行一些异步操作。

多个 v-models

V-model是一个指令，我们可以用它来实现对给定组件的双向绑定。我们可以在组件内部传递一个相应的属性，并在组件内部修改。

从表单元素中我们可以很好的了解v-model：

<input v-model="property />

但是你知道你可以在每个组件中使用 v-model 吗？在引擎盖下，v-model 只是传递值属性和监听输入事件的快捷方式。把上面的例子重写成下面的语法，就会有完全相同的效果：

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

我们甚至可以用组件 model 属性改变默认属性和事件名称：

model: {
  prop: 'checked',
  event: 'change'
}

正如你所看到的那样，如果我们想在组件中进行双向绑定，v-model指令是一个非常有用的语法求和者。不幸的是，每个组件只能有一个v-model。

幸运的是，这在Vue 3中不会成为问题。你可以给v-model的属性起名字，并且你可以拥有任意数量的v-model。下面你可以找到一个表单组件中的两个v-model的例子：

<InviteeForm
  v-model:name="inviteeName"
  v-model:email="inviteeEmail"
/>

这个 API 的改变目前正在本 RFC 中讨论，这意味着它在未来可能会发生变化。

未完待续。

推荐阅读：

公众号后台回复【前端】加入群

好文和朋友一起看~