Vue 3中那些激动人心的新功能

在近期我们发布的 《Vue 3 最值得期待的五项重大更新》 中，我们了解了 Vue 3 将带来的性能提升，知道了使用新版 Vue 编写的应用程序在性能表现上会很出色。但性能并不是最重要的部分，对于开发人员而言，最重要的是新版本将如何影响我们编写代码的方式。如你所料，Vue 3 带来了许多激动人心的新功能。值得庆幸的是，Vue 团队主要针对当前 API 做了添加和改进，没有引入多少重大更改。因此，熟悉 Vue 2 的开发人员应该可以很快习惯新语法。

让我们先从大多数人可能都听说过的 API 开始……

合成 API

合成（Composition）API 是 Vue 的新大版本中讨论最多的特色语法。这是一种全新的逻辑复用和代码组织方法。

目前，我们使用所谓 Options API 构建组件。要将逻辑添加到 Vue 组件中，我们要填充（option）诸如data、methods、computed之类的属性。这种方法的最大缺点是它本身并非有效的 JavaScript 代码。你需要准确了解模板中可以访问哪些属性，以及this关键字的行为。在后台，Vue 编译器需要将属性转换为可用的代码。因此我们无法享受自动提示或类型检查功能的帮助。

合成 API 会将组件属性中当前可用的机制暴露为 JavaScript 函数，从而解决这个问题。Vue 核心团队将合成 API 定义为“一组基于函数的附加 API，可以灵活地组合组件逻辑”。用合成 API 编写的代码更具可读性，也没有在幕后隐藏什么魔法，这使它更易于阅读和学习。

下面来看一个使用了新的合成 API 的组件示例，从中了解其工作机制。

  
    Count is: {{ count }}, double is {{ double }}, click to increment.
  



import { ref, computed, onMounted } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const double = computed(() => count.value * 2)

    function increment() {
      count.value++
    }

    onMounted(() => console.log('component mounted!'))

    return {
      count,
      double,
      increment
    }
  }
}

现在我们将这段代码分解为几部分，看看到底发生了什么事情：

import { ref, computed, onMounted } from 'vue'

如前所述，合成 API 将组件属性暴露为函数，因此第一步是导入所需的函数。在我们的示例中，我们需要用ref创建响应性引用、用computed创建计算属性，并用onMounted访问挂载的生命周期 hook。

现在你可能想知道神秘的setup方法是做什么的？

export default {
  setup() {

简单说，它只是一个将属性和函数返回到模板的函数，仅此而已。我们在这里声明所有响应属性、计算属性、观察者和生命周期 hooks，然后返回它们，以便在模板中使用。

我们没有从setup函数返回的内容将无法在模板中使用。

const count = ref(0)

根据上述内容，我们使用ref函数声明了称为count的响应属性。它可以包装任何原语或对象，并返回其响应性引用。传递的元素的值将保留在所创建引用的value属性中。例如，如果要访问count引用的值，则需要显式请求count.-value。

const double = computed(() => count.value * 2)

function increment() {
  count.value++
}

这正是我们在声明计算属性double和increment函数时所做的事情。

onMounted(() => console.log('component mounted!'))

我们使用onMounted hook 在组件挂载时记录了一些消息，这里只是告诉你可以这样做😉

return {
  count,
  double,
  increment
}

最后，我们使用increment方法返回count和double属性，以使其在模板中可用。

  
    Count is: {{ count }}, double is {{ double }}. Click to increment.
  

好了！现在，我们可以访问模板中setup方法返回的属性和函数，就像通过旧的 Options API 声明它们一样。

这是一个简单的示例，也可以通过 Options API 轻松实现。新的合成 API 的真正好处不仅仅是以不同的方式编码，在复用我们的代码 / 逻辑时，其优势就能显现出来。

使用合成 API 复用代码

新的合成 API 有更多优势。想想代码复用，这就是它的一大用武之地。目前，如果我们要在其他组件之间共享一些代码，则有两个选择可用——分别是 mixins 和作用域插槽。两者都有自己的缺点。

假设我们要提取counter功能并在其他组件中复用。下面的代码中你可以看到如何分别使用现有的 API 和新的合成 API 做到这一点：

先从 mixins 开始：

import CounterMixin from './mixins/counter'

export default {
  mixins: [CounterMixin]
}

mixins 的最大缺点是我们对它实际上添加到组件中的内容一无所知。这不仅让代码很难理解，而且还可能导致命名与已有的属性和函数发生冲突。

下面是作用域插槽。

  
     {{ count }}
    Increment
  

使用作用域插槽时，我们确切地知道可以通过v-slot属性访问哪些属性，因此代码更容易理解。这种方法的缺点是我们只能在模板中访问它，并且只能在Counter组件作用域中使用。

现在是时候使用合成 API 了：

function useCounter() {
  const count = ref(0)
  function increment () { count.value++ }

  return {
    count,
    incrememt
  }
}

export default {
  setup () {
    const { count, increment } = useCounter()
    return {
      count,
      increment
    }
  }
}

是不是更优雅？我们不受模板和组件作用域的限制，并且确切地知道可以从 counter 访问哪些属性。此外，由于useCounter只是返回某些属性的函数，因此我们可以获得编辑器中代码自动完成的帮助。没有隐藏在幕后的魔法，因此编辑器可以帮助我们检查类型并给出建议。

使用第三方库也能变得更优雅。例如，如果我们要使用 Vuex，则可以显式使用useStore函数，而不用污染 Vue 原型（this.$store），这种方法也消除了 Vue 插件的幕后魔法。

const { commit, dispatch } = useStore()

如果你想了解有关合成 API 及其用例的更多信息，我强烈建议你阅读 Vue 团队写的这篇文档（见下方链接）。这份文档解释了新 API 背后的理念，并给出了最佳用例的建议。Vue 核心团队的 ThorstenLünborg 还提供了一个很棒的存储库，其中包含合成 API 的使用示例。

文档：https://vue-composition-api-rfc.netlify.com/

存储库：https://github.com/LinusBorg/composition-api-demos

全局挂载 / 配置 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 中讨论，意味着将来它可能还会继续变动。

RFC：https://github.com/vuejs/rfcs/pull/29

片 段 

Vue 3 中值得期待的另一个激动人心的新功能是片段（Fragments）。

你可能会问什么是片段？嗯，如果你创建一个 Vue 组件，则它只能有一个根节点。这意味着无法创建这样的组件：

  
Hello
  
World

原因是代表任何 Vue 组件的 Vue 实例都需要绑定到单个 DOM 元素中。想要创建具有多个 DOM 节点的组件，唯一的方法是创建一个没有基础 Vue 实例的功能组件。

事实证明，React 社区也有同样的问题。他们提出的解决方案是一个名为片段（Fragment）的虚拟元素。它看起来差不多是这个样子：

class Columns extends React.Component {
  render() {
    return (
      
        Hello
        World
      
    );
  }
}

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

目前，你可以在 Vue 2 中使用 vue-fragments 库来应用片段，而在 Vue 3 中它是开箱即用的！

Suspense

React 生态系统中还有一个好主意也将在 Vue 3 中采用，就是 Suspense 组件。

Suspense 会暂停你的组件渲染，并渲染回退组件，直到满足一个条件为止。在 Vue London Evan 期间，Vue 团队简单介绍了这个主题，并向我们展示了值得期待的 API。到头来 Suspense 只是一个具有插槽的组件：

  
    
  
  
    Loading...
  

在Suspended-component完全渲染之前将显示回退组件。Suspense 可以等待组件下载完毕（如果该组件是异步的），或者在setup函数中执行一些异步操作。

多个 v-model

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

从表单元素可以很好地了解v-model：