Vue 3 中令人兴奋的新功能[每日前端夜话0xE2]
Posted 前端先锋
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue 3 中令人兴奋的新功能[每日前端夜话0xE2]相关的知识，希望对你有一定的参考价值。
每日前端夜话，陪你聊前端。
每天晚上18:00准时推送。
正文共：3509 字
预计阅读时间：8 分钟
翻译：疯狂的技术宅
来源：vueschool
在上一篇文章中，我们。我们已经知道，用新的 Vue 3 编写的程序效果会很好，但性能并不是最重要的部分。对开发人员而言，最重要的是新版本将会怎样影响我们编写代码的方式。
如你所料，Vue 3 带来了许多令人兴奋的新功能。值得庆幸的是，Vue 团队主要介绍了对当前 API 的添加和改进，而不是重大更改，所以已经了解 Vue 2 的人们应该很快就会对新语法感到满意。
让我们从大多数人可能听说过的API开始…
组件 API（Composition API）
组件 API 是 Vue 的下一个主要版本中最常用的讨论和特色语法。这是一种全新的逻辑重用和代码组织方法。
当前，我们使用所谓的 Options API 构建组件。为了向 Vue 组件添加逻辑，我们填充（可选）属性，例如 data、methods、computed等。这种方法的最大缺点是其本身并不是有效的 javascript 代码。你需要确切地知道模板中可以访问哪些属性以及 this 关键字的行为。在后台，Vue 编译器需要将此属性转换为工作代码。因此我们无法从自动建议或类型检查中受益。
组件 API 旨在通过将组件属性中当前可用的机制公开为 JavaScript 函数来解决这个问题。Vue 核心团队将组件 API 描述为 “一组基于函数的附加 API，可以灵活地组合组件逻辑。” 用组件 API 编写的代码更具有可读性，并且其背后没有任何魔力，因此更易于阅读和学习。
让我们通过一个用了新的组件 API 的组件的简单示例，来了解其工作原理。
1<template>
2 <button @click="increment">
3 Count is: {{ count }}, double is {{ double }}, click to increment.
4 </button>
5</template>
6
7<script>
8import { ref, computed, onMounted } from 'vue'
9
10export default {
11 setup() {
12 const count = ref(0)
13 const double = computed(() => count.value * 2)
14
15 function increment() {
16 count.value++
17 }
18
19 onMounted(() => console.log('component mounted!'))
20
21 return {
22 count,
23 double,
24 increment
25 }
26 }
27}
28</script>
现在，让我们把代码分解为几部分，来了解发生了些什么：
1import { ref, computed, onMounted } from 'vue'
正如我之前提到的，组件 API 将组件属性公开为函数，因此第一步是导入所需的函数。在例子中，需要使用 ref 创建响应性引用，用 computed 建立计算属性，并用 onMounted 访问安装的生命周期 hook。
现在你可能很想知道这神秘的 setup 方法到底是什么？
1export default {
2 setup() {
简而言之，它只是一个将属性和函数返回到模板的函数而已。我们在这里声明所有响应性属性、计算属性、观察者和生命周期 hook，然后将它们返回，以便可以在模板中使用它们。
我们不从 setup 函数返回的内容在模板中将会不可用。
1const count = ref(0)
根据上面的内容，我们声明了带有 ref 函数的名为 count 的响应属性。它可以包装任何原语或对象并返回其响应性引用。传递的元素的值将会保留在所创建引用的 value 属性中。例如，如果你想访问 count 引用的值，则需要明确要求 count.value。
1const double = computed(() => count.value * 2)
2
3function increment() {
4 count.value++
5}
这正是我们在声明计算属性 double 和 increment 函数时所要做的。
1onMounted(() => console.log('component mounted!'))
使用 onMounted hook，我们会在安装组件时记录一些消息，只是向你展示可以做到！
以上是关于Vue 3 中令人兴奋的新功能[每日前端夜话0xE2]的主要内容，如果未能解决你的问题，请参考以下文章
完全搞懂 Javascript 中的... [每日前端夜话0xE3]
每日前端夜话(No.0x01)——ECMAScript 2016,2017和2018中所有新功能的示例（上）