Vue 3开发的重要提示

目录

TypeScript支持

Teleport

片段

结论

Vue于2013年首次发布，是一个用于构建Web用户界面的渐进式框架。它是一个可采用的而非单一的框架，可与React和Angular等其他框架集成。虽然Vue只专注于视图层，但它可以轻松地为单页应用程序(SPA)提供支持。这个完全开源的项目在其 GitHub页面上维护。

2020年9月的Vue 3完整版本为开发人员带来了重大改进。Vue 3完全向后兼容Vue 2。它具有改进的性能、更好的可读性和几个新特性。

今天，我们将研究其中的一些功能，并了解如何使用它们来增强您的开发工作流程。我们还将思考在以前版本的Vue中使用这些功能所需的一些变通方法，以及探索GrapeCity的Vue产品。其中包括SpreadJS，一个无依赖的JavaScript电子表格解决方案，和Wijmo，一个动态的100多个JavaScript UI组件集。我们还将介绍TypeScript支持、Teleport和片段。

Vue 3最令人兴奋的方面之一是它是用TypeScript(TS)编写的，并且完全支持TypeScript(TS)。原生TS支持的好处是我们不必使用任何额外的工具。此外，随着应用程序的增长，它还有助于防止许多潜在的运行时错误。

以前，Vue 2只有TS的官方类型声明。开发人员必须使用npm安装TS并使用额外的插件来避免错误。这通常需要在Vue 2应用程序中使用TS的复杂而迂回的方法。Vue 3 API对于TS和JavaScript是相同的，这意味着在Vue 3中，我们对两个平台都获得了相同级别的原生支持。

让我们快速看一下如何在Vue 3中使用TS定义一个Vue组件。

import { defineComponent } from 'vue'
const Component = defineComponent({
    // type inference enabled
})

此处的示例导入defineComponent以便TS可以正确推断Vue组件中的类型。如果我们想使用单个文件组件，我们必须在我们的代码周围包含以下标签：

Vue 3在所有Vue项目中提供了对TS的简单方便的访问。Vue 3中的完整TS支持为开发人员提供了更大的灵活性。它比以前版本的Vue更易于访问。

Teleport是一个令人兴奋的Vue 3功能。在Vue 2中，这被称为门户，需要插件和其他工具。

Vue鼓励开发人员创建包含UI和组件内部相关行为的用户界面(UI)系统。然后，这些组件可以以树状格式相互嵌套。虽然这是构建UI的好方法，但在许多情况下，从技术角度来看，我们希望组件的一部分存在于文档对象模型(DOM)的其他位置。Vue 3中的Teleporting使我们能够将模板片段（例如模态框）存在于单独的组件中，而无需一堆混乱的CSS或组合更改。在Vue文档中找到的这段代码使我们能够说明这种变化。

我们来看看下面的HTML结构：

    

        Tooltips with Vue 3 Teleport
        

            
        
    

此HTML创建一个带有通用模式按钮的基本页面。目前，模态框继承了父div标签的CSS属性。在Vue 2中，为了让modal继承body标签属性，我们需要使用门户插件或创建一些杂乱且容易出错的CSS。然而，在Vue 3中，我们使用新的传送功能将模态按钮发送到正文。我们这样做时不会将其从DOM中的原始位置移除。

以下代码比Vue 2的工具更简单地实现了这个目标：

app.component('modal-button',{
    template: `
        
            Open full screen modal! (With teleport!)
        

    
        

            

                I'm a teleported modal!
                (My parent is "body")
            
                Close
            
            
        
    
    `,
    data() {
        return {
            modalOpen: false
        }
    }
})

就像使用 将body标签的CSS属性应用于创建的模态一样简单。在此示例中，我们为页面上的按钮创建了一个空间，但模态本身的功能是全屏模态。

Teleporting是Vue 3的一个受欢迎的补充。它是减少混乱和提高项目可读性的好工具。

Vue 3还包括对片段或多根节点组件的支持。在Vue 2中，每个组件只能有一个根节点。也没有插件支持创建多根节点。

请注意，片段需要开发人员在需要时定义非属性特性。非prop属性是传递给组件但在使用时需要进一步定义的特性或事件侦听器。

在Vue 2中，我们经常不得不在单个div标签中创建我们的组件。这种做法造成了他们可能属于哪个模板以及如何属于的混乱。在Vue 3中，片段如下所示：

    ...
    ...
    ...

我们可以在这个例子中看到，我们只需要创建一个模板，然后我们就可以轻松地创建多个没有div标签的节点。该  标签包含一个非属性属性绑定的示例，在Vue 3中使用片段时有时需要该属性绑定。

片段非常适合减少DOM混淆和创建更清晰的代码。

与以前的框架版本相比，Vue 3提供了更大的灵活性和更好的性能。虽然新版本带来了许多新功能，但我们今天探讨的三个是对开发人员增强开发工作流程最有益的一些。

Vue 3还向后兼容Vue 2代码，这意味着没有人必须完全重写他们的系统来利用新功能。Vue是完全开源的，完全在GitHub上维护。考虑加入该项目。

如果您正在寻找使用Vue 3及其今天介绍的功能的方法，但不知道从哪里开始，请查看GrapeCity的一些产品。这些组件无缝地插入到您的Vue应用程序中，以添加强大的增强功能。

例如，SpreadJS是一个JavaScript电子表格解决方案，在Vue中运行良好。开发人员仅使用Vue和SpreadJS即可轻松创建自定义、功能丰富的电子表格、仪表板、报告等。

或者，您可以体验 Wijmo ，这是一个在React和Angular中也可用的UI组件集合。Wijmo与SpreadJS非常相似，具有大量有用的功能，例如能够在Vue中创建灵活的图表和数据网格。Wijmo是超轻量级的，不会在您的项目上留下巨大的足迹。它使开发人员在使用Vue 3时更加自由。

https://www.codeproject.com/Articles/5311999/Top-Tips-for-Vue-3-Development