组合索引效果会更好吗_更好的组合

组合索引效果会更好吗

In VueJS there are few ways to compose components and reuse logic. In this article, I would like to demonstrate a way to boost composition in Vuejs (2.* and 3.*).

在VueJS中，很少有组合组件和重用逻辑的方法。 在本文中，我想演示一种在Vuejs(2. *和3. *)中增强合成的方法。

I really like the recent proposals regarding the Composition API, but I think that can be part of a broader view.

我真的很喜欢关于Composition API的最新建议，但是我认为这可以成为更广泛观点的一部分。

Below, you can find a component implementing a general use case (a simple data fetching from a remote endpoint and displaying the different transitions and data), though most of the logic is always duplicated along with the template, data, and other variables when the same logic is applied to other places or components.

在下面，您可以找到一个实现一般用例的组件(从远程端点获取简单数据并显示不同的转换和数据)，但是当执行以下操作时，大多数逻辑总是与模板，数据和其他变量一起复制同样的逻辑也适用于其他地方或组件。

How do we refactor this component and improve it? Let’s go step-by-step and make this component more readable and reusable.

我们如何重构和改进这个组件？ 让我们逐步进行操作，使该组件更具可读性和可重用性。

Vue Composition API (Vue Composition API)

Thanks to the new Vue Composition API, we can pull out some logic in order to re-use it, without losing reactivity or features provided by Vue components.

感谢新的Vue Composition API，我们可以提取一些逻辑以便重新使用它，而不会失去Vue组件提供的React性或功能。

This approach helps in organizing the code, makes components more readable and it helps to lower the overall complexity. As a recommendation, I believe this should be the very first thing to do when refactoring huge, complex, and tangled components.

这种方法有助于组织代码，使组件更具可读性，并有助于降低整体复杂性。 作为建议，我认为这应该是重构庞大，复杂和混乱的组件时要做的第一件事。

We are going to extract the part related to the data fetching and related variables (loading, error, etc…), but I don’t want to discuss what Composition API is and what are the features, pros, and cons.

我们将提取与数据获取和相关变量( 加载，错误等)相关的部分，但我不想讨论什么是Composition API以及功能，优点和缺点。

Let’s create a simple function which provides the necessary stuff for fetching along with the reactive variables:

让我们创建一个简单的函数，其中提供了必要的内容以及React变量：

The created functions now return a set of reactive variables (loading, error, data, and hasData) that can be used by our component and an async function in order to execute the data fetching (fetchData, which will mutate the reactive variables returned).

现在，创建的函数将返回一组React变量( loading，error，data和hasData )，我们的组件和一个异步函数可以使用这些React变量来执行数据提取( fetchData ，这将使返回的React变量发生突变)。

And, let’s refactor our component to use the Composition API instead:

并且，让我们重构我们的组件以使用Composition API：

As you noticed, our component is containing the setup method as well, which invokes the useFetchData function while destructuring returned variables/functions and returning them to the component instance.

正如您所注意到的，我们的组件也包含setup方法，该方法调用useFetchData函数，同时对返回的变量/函数进行解构并将它们返回到组件实例。

In this example, I am using the fetchData function in the mounted lifecycle hook but it could be invoked wherever you desire. Whenever something is evaluated/changed by that invoked function, the result will be reflected in our component since they are reactive properties.

在此示例中，我在已安装的生命周期挂钩中使用fetchData函数，但可以在任何需要的地方调用它。 只要该调用函数评估/更改某些内容，结果便会反映在我们的组件中，因为它们是React性的。

JSX和TSX (JSX and TSX)

Now let’s suppose we want to pass the data to an inner component. There are multiple ways to do so with VueJS but I would like to refactor this to use TSX (or JSX if you prefer) instead:

现在，假设我们要将数据传递给内部组件。 使用VueJS可以有多种方法，但是我想将其重构为使用TSX (如果愿意，可以使用JSX )代替：

I know that this might look very similar to React but I believe this opens a lot of doors to composition in a better way.

我知道这看起来可能与React非常相似，但是我相信这为更好地进行合成打开了许多大门。

It’s actually quite simple to understand, it’s the same thing as the template, but we moved the HTML part to the Render function.

它实际上很容易理解，与模板相同，但是我们将HTML部分移至了Render函数。

We are not done yet with the quest to pass it to an inner component and we could actually improve it as the following piece of code, which exports the whole thing as a function we can re-use:

我们还没有完成将其传递给内部组件的追求，我们实际上可以将其改进为以下代码，将整个内容导出为可重复使用的功能：

Now that we brought it to the next level, get rid of the SFC (Single File Component file) we can actually boost composition.

现在我们将其带入了一个新的高度，摆脱了SFC (单个文件组件文件)，我们实际上可以增强合成。

At this stage, we are using defineComponent to create a component using the Composition API and relying on JSX/TSX in order to avoid the template section. The beauty of this approach is that we can treat a component as a function and rely on the principles of the Functional Programming Paradigm (e.g. first-class functions, pure functions, etc…)

在此阶段，我们将使用defineComponent通过Composition API并依赖JSX / TSX来创建组件，以避免模板部分的出现。 这种方法的优点在于，我们可以将组件视为函数，并依赖于函数式编程范例的原理(例如，一流的函数，纯函数等)。

For instance, the Render function is also containing a div containing the data, but imagine passing a component as a parameter of the exported function and use it in the returned JSX/TSX (passing the response/data as props to the requested component).

例如，Render函数还包含一个包含数据的div，但可以想象将一个组件作为导出函数的参数传递，并在返回的JSX / TSX中使用它(将响应/数据作为道具传递给所请求的组件)。

It might look like this:

它可能看起来像这样：

Now we are expecting a component as a parameter and using it in the returned value of the Render function.

现在，我们期望将组件作为参数，并在Render函数的返回值中使用它。

We can do more.

我们可以做的更多。

Actually, we could expect also the useFetchData function as a parameter in the exported function.

实际上，我们也可以期望useFetchData函数作为导出函数中的参数。

With these changes, on top of the component, as an accepted parameter, we are expecting a Function with the type FetchData which is returning a set of expected variables/functions/computed in order to use in our component.

随着这些变化，在组件的顶部，作为公认的参数，我们期待一个功能与类型FetchData它返回一组，以便计算在我们的组件使用预期变量/功能/。

This is really useful in order to replace Inheritance/Extension and rely on a more functional approach. So, instead of extending already existing components and overriding component’s functions, we could actually pass in the desired component and function. Typescript is only helping here with typings and inference, so Javascript would be enough too.

这对于替换继承/扩展并依靠功能更强大的方法非常有用。 因此，我们可以扩展所需的组件和功能，而不是扩展已经存在的组件并覆盖组件的功能。 Typescript仅在这里帮助您进行键入和推断，因此Javascript也足够了。

For instance, if we would like to use this, it might look like the following:

例如，如果我们想使用它，它可能看起来如下所示：

We have called the last example above as withLoaderAndFetcher and we are using it passing 3 different components with 3 different functions (expected to achieve the desired thing the in decorator).

我们将上面的最后一个示例称为withLoaderAndFetcher ，我们正在使用它传递具有3个不同功能的3个不同组件(预期在装饰器中实现所需的功能)。

This can be even pushed further, but I wanted to show how it is possible to achieve this state and increase the number of solutions towards the functional composition. This is example code and might not work perfectly, but the idea and concept is the most important thing to catch.

这甚至可以进一步推动，但是我想展示如何实现这种状态并增加针对功能组合的解决方案的数量。 这是示例代码，可能无法完美运行，但是这个想法和概念是最重要的。

Cheers :)

干杯:)

翻译自: https://itnext.io/better-composition-in-vue-fd35b9fe9c79

组合索引效果会更好吗