vue概述_Vue 3中的新功能概述

vue概述

At the time of this writing, Vue 3.0 is at its 10th alpha version. Expect a faster, smaller, more maintainable, and easier to use version of the Vue you know and love. You can still use Vue via a script tag and your Vue 2.x code will continue to work. But you can start playing with the alpha version of Vue 3.0 here and we’re going to get into some of what v3 is offering.

在撰写本文时，Vue 3.0的第十个Alpha版本。 期望您知道和喜欢的Vue更快，更小，更易维护且更易于使用。 您仍然可以通过script标签使用Vue，并且Vue 2.x代码将继续起作用。 但是您可以在这里开始使用Vue 3.0的Alpha版本，我们将深入了解v3提供的功能。

Among other things, there’s a new API for creating components. It doesn’t introduce new concepts to Vue, but rather exposes Vue’s core capabilities like creating and observing reactive state as standalone functions. This is ultimately useful to Vue developers of all levels.

除其他外，还有一个用于创建组件的新API。 它没有向Vue引入新概念，而是将Vue的核心功能(如创建和观察React性状态)作为独立功能公开。 这最终对所有级别的Vue开发人员都是有用的。

选项API和合成API (Options API and Composition API)

In Vue 2, components are created with the object-based Options API. Vue 3 adds a set of APIs, referred to as the Composition API, which is function-based. This is primarily to address two issues that Vue 2 ran into for very large projects.

在Vue 2中，使用基于对象的Options API创建组件。 Vue 3添加了一组API，称为基于功能的Composition API 。 这主要是为了解决Vue 2在大型项目中遇到的两个问题。

In large components that encapsulate multiple logical tasks, you want to group code by feature, but the nature of the Options API is that such code gets split up (among lifecycle hooks and so on), negatively affecting readability. Secondly, you want to be able to reuse logic in large-scale projects, and in Vue 2, solutions like mixins don’t address either issue very well.

在封装了多个逻辑任务的大型组件中，您希望按功能对代码进行分组，但是Options API的本质是此类代码会被拆分(在生命周期挂钩等中)，从而对可读性产生负面影响。 其次，您希望能够在大型项目中重用逻辑，而在Vue 2中，诸如mixins之类的解决方案不能很好地解决这两个问题。

Vue 3 seeks to kill both birds with one stone by exposing a new API. This API will live alongside the Options API, not replace it. This means that you can go on building components in the way that you’re used to without encountering any problems. But, you can also start building with the Composition API, which provides more flexible code organization and logic reuse capabilities as well as other improvements.

Vue 3试图通过公开一个新的API用一块石头杀死两只鸟。 该API将与Options API一起使用，而不是替代它。 这意味着您可以按照习惯的方式继续构建组件，而不会遇到任何问题。 但是，您还可以从Composition API开始构建，该API提供了更灵活的代码组织和逻辑重用功能以及其他改进。

Even if the problems it specifically addresses are not pertinent to you, the new API has clearly had a lot of thought go into it to push Vue forward as a framework, for instance, by reducing the extent to which Vue operates “magically” behind the scenes.

即使特定的问题与您无关，新的API显然也有很多想法可以将Vue作为框架推进，例如，通过减少Vue在其背后“神奇地”运行的程度。场景。

合成API (Composition API)

The Composition API is available now as a plugin for Vue 2 so you can try it out. It will be shipped baked-in in Vue 3.

Composition API现在可以作为Vue 2的插件使用 ，因此您可以尝试一下。 它将在Vue 3中发货。

In Vue 2 reactivity was achieved through the getters and setters of Object.defineProperty. This caused some limitations which you’ve already probably experienced (e.g.: updating an Array by index). In Vue 3, reactivity is accomplished through proxies, a feature that was introduced in JavaScript ES6.

在Vue 2中，通过Object.defineProperty的获取器和设置器实现了React性。 这带来了您可能已经遇到的一些限制(例如：按索引更新数组)。 在Vue 3中，React性是通过代理完成的， 代理是JavaScript ES6中引入的功能。

You need not have a Vue instance to use the new reactivity API. It offers standalone APIs which allow you to create, observe, and react to state changes.

您无需具有Vue实例即可使用新的React性API。 它提供了独立的API，可让您创建，观察状态并对状态变化做出React。

You would first import { reactive } from 'vue'. Then, you could create an object in the following way:

您首先import { reactive } from 'vue' 。 然后，您可以通过以下方式创建对象：

const state = reactive({ count: 0 })

const state = reactive({ count: 0 })

You’ll have access to APIs that will allow you to dynamically inject component lifecycle hooks into a Vue instance.

您将有权使用API​​，从而可以将组件生命周期挂钩动态注入Vue实例。

The lifecycle registration methods can only be used in the setup() method which is the entry point where all the composition functions are called. For instance:

生命周期注册方法只能在setup()方法中使用， setup()方法是调用所有组合函数的入口点。 例如：

import { onMounted } from 'vue'

export default {
  setup() {
    onMounted(() => {
      console.log('component is mounted.')
    })
  }
}

Functions that use these APIs can be imported into a component, allowing the component to do multiple logical tasks with reusable and readable code.

可以将使用这些API的功能导入到组件中，从而允许该组件使用可重用和可读的代码执行多个逻辑任务。

打字稿 (TypeScript)

The composition API also offers better TypeScript support. It’s supposed to result in better type inferences with bindings returned from setup() and props declarations used to infer types.

合成API还提供了更好的TypeScript支持。 它应该通过从setup()返回的绑定和用于推断类型的props声明导致更好的类型推断。

Component code using TypeScript and JavaScript will look largely identical and TypeScript definitions benefit JavaScript users as well, say, if they use an IDE like Visual Studio Code.

使用TypeScript和JavaScript的组件代码看起来大致相同，并且TypeScript定义也可以使JavaScript用户受益，例如，如果他们使用像Visual Studio Code这样的IDE。

查看宣言 (View Declaration)

Vue 2 supports templates as well as render functions. You don’t need to know an awful lot here except that Vue 3 continues to support both while optimizing rendering speed (such as by speeding up diff algorithms that operate under the hood so that Vue knows what needs to be re-rendered).

Vue 2支持模板以及渲染功能。 除了在优化渲染速度的同时Vue 3继续支持这两种功能(例如通过加速在diff运行的diff算法以使Vue知道需要重新渲染)之外，您不需要在这里了解太多知识。

快点 (Faster)

Virtual DOM has been rewritten from the ground-up to make for faster mounting and patching.

虚拟DOM从头开始进行了重写，以加快安装和修补速度。

Compile-time hints have been added to reduce runtime overhead. This means skipping unnecessary condition branches and avoiding re-renders. Static tree and static prop hoisting means entire trees and nodes can skip being patched. Inline functions (like in a handler for a component in a template) won’t cause unnecessary re-renders.

添加了编译时提示以减少运行时开销。 这意味着跳过不必要的条件分支并避免重新渲染。 静态树和静态Struts吊装意味着整个树和节点都可以跳过修补。 内联函数(例如在模板中组件的处理程序中)不会导致不必要的重新渲染。

You’re going to get a proxy-based observation mechanism with full language coverage and better performance. Instance properties will be proxied faster using native Proxy instead of Object.defineProperty like before.

您将获得具有完整语言覆盖范围和更好性能的基于代理的观察机制。 使用本机代理而不是像以前一样使用Object.defineProperty可以更快地代理实例属性。

You can expect up to 100% faster component instance initialization with double the speed and half the memory usage. ️️️

您可以期望将组件实例的初始化速度提高100％，速度提高一倍，内存使用量减少一半。 ️️️

较小的 (Smaller)

Vue 3 is also smaller.

Vue 3也较小 。

It is tree shaking-friendly. Tree shaking refers to shaking off unused code. The core runtime has gone from ~20kb in size, gzipped, to ~10kb, gzipped.

它是树摇友善的。 摇树是指删除未使用的代码。 核心运行时大小已从约20kb(压缩)增加到了约10kb(压缩)。

The size of the Vue bundle increases with each new feature but, by providing most global APIs and Vue helpers as ES module exports, Vue 3 makes more code tree shakeable, even template code.

Vue捆绑包的大小随每个新功能而增加，但是，通过在ES模块导出时提供大多数全局API和Vue帮助器，Vue 3使更多的代码树(甚至模板代码)可动摇。

连贯性 (Coherence)

Libraries like Vue Router and test-utils will be updated to line up with the new Vue. Vue now has a custom renderer API (similar to React Native for those who want to use it to create renderers for mobile or other host environments.

Vue Router和test-utils等库将进行更新，以与新的Vue保持一致。 Vue现在具有一个自定义渲染器API(对于那些想要使用它来为移动或其他主机环境创建渲染器的人，它类似于React Native 。

结论 (Conclusion)

There is a ton to look forward to with Vue 3 with more like Portals that couldn’t fit in this short post. The new Composition API moves us towards an all around better Vue. An exact release date is not set but it’s coming soon. Get a head start now!

Vue 3 有很多值得期待的地方，而更多类似Portal的内容可能无法在本篇短文中找到。 新的Composition API使我们朝着更好的Vue全面发展。 尚未确定确切的发布日期，但即将发布。 现在就开始吧！

翻译自: https://www.digitalocean.com/community/tutorials/vuejs-whats-coming-in-vue-3

vue概述