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

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')

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 中讨论，这意味着它在未来可能会发生变化。

未完待续。