专栏首页前端开发博客Vue 3中令人激动的新功能:Fragment+Suspense+多v-model

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

未完待续。

本文分享自微信公众号 - 前端开发博客(caibaojian_com),作者:前端开发博客

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-05-04

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 译文:使用Vue 3加快网络应用的速度

    译文:http://caibaojian.com/vue3-faster.html

    前端开发博客
  • [官宣] Vue 3.0 — One Piece 发布

    今天,我们自豪地宣布Vue.js 3.0 "One Piece "的正式发布。这个框架的新的主要版本提供了更好的性能、更小的捆绑包大小、更好的TypeScrip...

    前端开发博客
  • 微信小程序自定义组件详解

    从小程序基础库版本 1.6.3 开始,小程序支持简洁的组件化编程。所有自定义组件相关特性都需要基础库版本 1.6.3 或更高。

    前端开发博客
  • 「面试题」20+Vue面试题整理

    从镜片的厚度和黄黑相见的格子衬衫我察觉到,面前坐着的这位面试官应该是来者不善。我像以往一样,准备花3分钟的时间进行自我介绍。在此期间,为了避免尴尬,我盯着面试官...

    童欧巴
  • Vue 应用单元测试的策略与实践 03 - Vue 组件单元测试

    2.1 在 Vue 应用的单元测试中,对不同 UI 组件的单元测试有何不同?颗粒度该细到什么样的程度?

    JimmyLv_吕靖
  • Angular和Vue.js 深度对比

    Vue.js 是开源的 JavaScript 框架,能够帮助开发者构建出美观的 Web 界面。当和其它网络工具配合使用时,Vue.js 的优秀功能会得到大大加强...

    葡萄城控件
  • 一张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构

    本文内容讲解的内容:一张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构。

    夜尽天明
  • Laravel 项目中编写 Vue 组件

    新安装的 Laravel 应用在 resources/js/components 目录默认包含一个 ExampleComponent.vue Vue 组件。 ...

    hedeqiang
  • [官宣] Vue 3.0 — One Piece 发布

    今天,我们自豪地宣布Vue.js 3.0 "One Piece "的正式发布。这个框架的新的主要版本提供了更好的性能、更小的捆绑包大小、更好的TypeScrip...

    前端开发博客
  • 【译】框架与库的差异

    比如,你有一个处理字符串的程序。你决定保持你代码的DRY(don't repeat yourself),然后编写像下面可复用的功能代码:

    嘉明

扫码关注云+社区

领取腾讯云代金券