你们中的一些人可能会听说第三个版本的Vue正在敲门。Vue JS 逐年发展，Vue 3 将成为它的最新版本。Vue 3 和 Vue 2 沿着类似的路线发展，但是，两者都有显著的变化。Vue 3 的正式版本已于 2020 年 9 月发布。目前，API，核心，结构是稳定的，您可以在生产环境中使用它。
每个 Vue .js开发人员都在问自己的问题是，最新版本会带来哪些变化，它们将如何影响整体性能和稳定性？我们的 JS 开发人员更深入地研究了 Vue 3，以下是他们的发现：
重写使 Vue.js 3 更小、更快
在过去的一年里，Vue团队一直在研究Vue的下一个主要版本.js，该版本已于2020年下半年发布。根据 Vue 核心团队的说法，有两个关键考虑因素导致了 Vue 的新版本和重写：首先是新的 JavaScript 语言功能在主流浏览器中的普遍可用性，其次是当前代码库中的设计和架构问题，这些问题随着时间的推移而暴露出来。重写提供了重新思考代码组织的机会，并考虑到了这些事情。对框架许多方面的升级导致了速度的提高。用户报告说，Vue 3的速度提高了约55%，内存使用率下降到54%，更新速度提高了133%。这是通过使用TypeScript完全重写DOM实现来实现的。
创建大型项目从未如此简单
组件逻辑的新方法有助于维护，并使编写大型项目变得更加容易。Vue 核心团队将 Composition API 描述为“一组基于函数的累加 API，允许灵活组合组件逻辑”。Vue 3 有助于降低应用程序的复杂性，多年来，Vue 团队注意到许多用户也在使用 Vue 来构建大型项目 ， 这些项目由多个开发人员组成的团队在很长一段时间内进行迭代和维护。
现在，代码不必总是按选项来组织代码，而是可以组织为每个函数来处理一个特定功能。API 还使得在组件之间甚至组件外部提取和重用逻辑变得更加简单。同样值得注意的是，完整的TypeScript支持使大型项目的维护比以前更容易。
TypeScript
此外，还有一个很大的游戏规则改变者，作者注意到用户越来越多地同时使用Vue和TypeScript。为了支持他们的用例，他们必须独立于源代码来编写和维护TypeScript声明，源代码使用不同的类型系统。切换到TypeScript可以自动生成声明文件，减轻维护负担。Vue 3 在 Vue 2 中不会发生绝对的变化，但是当从 Vue 2 重写它时，一些预期的升级变成了现实，这使得应用程序更小、更快、更强大。Vue 3 的代码库是用 TypeScript 编写的。这使其能够自动生成、测试和捆绑最新的类型定义。你可以使用 TypeScript 或 JavaScript 创建一个 Vue 应用程序，这取决于你的专业知识。
interface Book {
title: string
author: string
year: number
}
const Component = defineComponent({
data() {
return {
book: {
title: 'Vue 3 Guide',
author: 'Vue Team',
year: 2020
} as Book
}
}
})
组合 API
到目前为止，在使用 Vue 2 时，您可能遇到了三个限制：
- 随着组件变得越来越大，可读性变得困难。
- 当前的代码重用模式都有缺点。
- Vue 2 开箱即用地提供有限的 TypeScript 支持。
Vue3 Composition API 附带了一个 setup（） 方法。此方法封装了我们的大多数组件代码，并处理反应性、生命周期挂钩等等。简而言之，Composition API有助于更好地将我们的代码组织成更模块化的功能，而不是根据属性类型（方法，计算，数据）进行分离。如果你熟悉 Vue 2，那么你可能已经使用过 mixin 来实现这个目的。但是新的 Composition API 提供了一个更好的解决方案和可读性，并允许 Vue 应用程序更具可扩展性。
Composition API最有趣的部分之一是，它允许Vue依靠原生JavaScript中内置的保护措施来共享代码，比如将变量传递给函数和模块系统。新的API和它的组织使Vue 3更容易理解，如果你以前使用React，切换到Vue会更容易。
设置
要使用 Composition API，我们应该从 setup（） 方法开始。
在 Vue 3 中，你可以用 setup（） 方法替换以下选项：
- 组件
- 方法
- 生命周期方法
- 道具
- 数据
- 计算属性
注意：Vue 3 开发可以像 Vue 2 一样正常地使用上述所有内容，而无需 setup（） 方法。
新的 Composition API 被重写，以便更好地进行逻辑组织、封装和重用，这使得它非常灵活，跟踪每个组件属性的来源也更容易。
如何使用新 API 构建组件的示例：
<template>
<button @click="increment">
Count is: {
{ state.count }}, double is: {
{ state.double }}
</button>
</template>
<script>
import { reactive, computed } from 'vue'
export default {
setup() {
const state = reactive({
count: 0,
double: computed(() => state.count * 2)
})
function increment() {
state.count++
}
return {
state,
increment
}
}
}
</script>主要缺点是它需要一些额外的时间来熟悉，它不像Vue 2所知道的学习曲线那么容易。好消息是，您不需要使用新的API重写现有组件，也不需要在任何地方使用它。
钩
那些包含状态逻辑的 React 组件必须是类组件。即使 React 中已经存在无状态功能组件，也需要创建适应状态逻辑而不成为类的组件。那是胡克斯诞生的那一刻。它在功能组件中使用状态逻辑，无需编写类。
Vue.js允许您使用mixins的无状态功能组件，有了它，您可以在特定文件中定义逻辑或功能，并在功能组件中使用甚至重用它。Vue Hooks基本上是mixins的增强版本，它允许您将逻辑从一个Hook传递到另一个Hook，并且您还可以使用来自另一个Hook的Hook中的状态。与 React 类似，Vue 中的 Hooks 是在函数中定义的，这些函数可以更干净、更灵活地定义和共享逻辑，并且可以返回状态。
传送
说到DOM。不是那么常见，但要解决的问题是将组件的一部分安装在与Vue组件层次结构不同的DOM位置。例如，创建包含全屏模式的组件。在大多数情况下，您希望模态的逻辑存在于组件中，但是模态的定位很快就会变得难以通过CSS解决，或者需要更改组件组合。现在，通过使用像这样的传送功能，可以轻松实现这一点
app.component('app-modal', { template: `
<button @click="isOpen = true">
Open modal
</button>
<teleport to="body">
<div v-if="isOpen" class="modal">
I'm a teleported modal
</div>
</teleport>
`,
data() {
return {
isOpen: false
}
}
})你仍然可以传递道具并与之交互，就像在组件内部一样！
结论
性能对于前端框架一直是并且将是必不可少的，特别是对于不断增长和强大的应用程序而言。现在，可以肯定地说，Vue 3 是一个更可靠的框架。它提供了一种新的，更简单的方法来组织源代码，并且在Typescript及其新功能（例如Composion API）的帮助下，项目结构可以变得更加可读，特别是对于新手。Vue 3 被重写了，这个重写有一些长期的好处：
-
更小的磁芯尺寸
-
摇树
-
优化的老虎机生成
-
起重和内联
-
简化来源
-
对于新手来说，学习起来更容易
-
更好的性能 - 也许不是某些人的两倍，但在某些情况下仍然可以看到
我们没有机会向您展示 Vue 3 带来的所有变化。最好的选择是今天自己尝试。