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

Posted 2021-04-16 前端之巅

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue 3中那些激动人心的新功能相关的知识，希望对你有一定的参考价值。

作者｜Filip Rakowski

译者｜王强

编辑｜王文婧

在近期我们发布的中，我们了解了 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 的组件示例，从中了解其工作机制。

<template>
  <button @click="increment">
    Count is: {{ count }}, double is {{ double }}, click to increment.
  </button>
</template>

<script>
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
    }
  }
}
</script>

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

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 在组件挂载时记录了一些消息，这里只是告诉你可以这样做

以上是关于Vue 3中那些激动人心的新功能的主要内容，如果未能解决你的问题，请参考以下文章