专栏首页云前端[译] VueJS 中更好的组件组合方式

[译] VueJS 中更好的组件组合方式

  • 原文地址:https://itnext.io/better-composition-in-vue-fd35b9fe9c79
  • 原文作者:?Francesco Vitullo
  • 译文出自:?掘金翻译计划
  • 本文永久链接:https://github.com/xitu/gold-miner/blob/master/article/2020/better-composition-in-vue.md
  • 校对者:?Gesj-yean, ?dupanpan

VueJS 中有一些组合组件并复用逻辑的方法。在本文中,我将展示一种在 Vuejs (2.* 及 3.*) 中改进组合方式的方法。

我的确欣赏最近的 Composition API 提案,但我认为视野还可以更开阔。

下面,你可以看到一个实现了一种常规用例(从远端获取一个简单的数据并将其搭配不同的转场效果显示出来)的组件,尽管大部分逻辑及其相关的模版、数据和其它变量等与出现在其它地方或组件中的相同逻辑并无不同,它们还是出现在了该组件中。

<template>
<div>
    <div v-if="loading"> Loading... </div>
    <div v-if="error"> An Error occured, please try again</div>
    <div v-if="hasData"> {{ data }} </div>
</div>
</template>

</template>

<script>
    export default {
        data() {
            return {
                loading: false,
                error: false,
                data: {}
            }
        },
        methods: {
            fetchData() {
                this.loading = true;
                setTimeout(() => {
                    this.data = { text: 'example' };
                    this.loading = false;
                }, 4000);
            }
        },
        computed: {
            hasData() {
                return this.data && !!this.data.text;
            }
        },
        mounted() {
            this.fetchData();
        }
    }
</script>

该如何重构并改善这个组件呢?让我们一步步地让其更易读且更容易复用。

Vue Composition API

感谢新的 Vue Composition API,使得我们可以在不丢失由 Vue 组件提供的响应性或其它特性的前提下,抽出一些逻辑以来复用它。

这种方式有助于组织代码、让组件更易读,并有助于降低总体复杂度。作为一种建议,我相信这些应该是重构巨大、复杂和混乱的组件时的首要之事。

我们将抽取与获取数据有关的部分及相关的变量(loading、error 等……),但我并不想谈论什么是 Composition API 以及其特性、优点和缺点。

让我们来创建一个提供了获取数据必要功能及若干响应式变量的简单函数:

import { reactive, toRefs, computed, Ref, ComputedRef } from '@vue/composition-api';

interface ReceivedData {
    text?: string
}

interface FetchState {
    loading: boolean,
    error: boolean,
    data: ReceivedData
}

interface FetchDataVars {
    loading: Ref<boolean>;
    error: Ref<boolean>;
    data: Ref<object>;
    fetchData: Function;
    hasData: ComputedRef<boolean>
}

export default (): FetchDataVars => {
    const state = reactive<FetchState>({
        loading: true,
        error: false,
        data: {}
    });

    const fetchData = async () => {
        state.loading = true;
        setTimeout(() => {
            state.data = { text: 'example' };
            state.loading = false;
        }, 4000);
    }

    const hasData = computed(() => state.data && !!state.data.text)
    
    return {
        ...toRefs(state),
        fetchData,
        hasData
    }
}

新创建的函数现在返回了可被用于组件的一组响应式变量 (loading、error、data,及 hasData) 及一个用来执行数据获取任务的异步函数 (fetchData,将会改变上述响应式变量) 。

而后,来使用 Composition API 重构组件:

<template>
<div>
    <div v-if="loading"> Loading... </div>
    <div v-if="error"> An Error occured, please try again</div>
    <div v-if="hasData"> {{ data }} </div>
</div>
</template>

</template>

<script lang="ts">
    import useFetchData from '../composables/use-fetch-data';
    import { defineComponent } from '@vue/composition-api';

    export default defineComponent({
        setup() {
            const { loading, error, data, fetchData, hasData } = useFetchData();
            return {
                loading,
                error,
                data, fetchData,
                hasData
            }
        },
        mounted() {
            this.fetchData();
        }
    });
</script>


正如你所注意到的,我们的组件还包含了 setup 方法,由其调用 useFetchData 函数,同时解构返回的变量和函数并将它们返回给组件实例。

在这个例子中,我在 mounted 生命周期钩子中使用了 fetchData 函数,但其实你可以在期望的任意位置调用它。无论何时,被该函数求值或改变的结果都会反映在组件中,因为它们都是响应式属性。

JSX 和 TSX

现在假设我们想要将获取的数据传递到一个内部组件中。借助 VueJS 有多种实现的方法,但我却想使用 TSX (你若更喜欢 JSX 也行) 来重构代码:

<script lang="tsx">
    import useFetchData from '../composables/use-fetch-data';
    import { defineComponent } from '@vue/composition-api';

    export default defineComponent({
        setup() {
            const { loading, error, data, fetchData, hasData } = useFetchData();
            return {
                loading,
                error,
                data, fetchData,
                hasData
            }
        },
        mounted() {
            this.fetchData();
        },
        render() {
            return (
                <div>
                    { this.loading && <div> Loading ... </div> }
                    { this.error && <div> An Error occured, please try again </div> }
                    { <div> { this.data } </div> }
                </div>
            )
        }
    });
</script>

我知道这看起来很像 React,但我相信这开启了以更好的方法优化组合方式的许多可能之门。

这其实很易懂,它完成了和模板同样的事情,但我们将 HTML 部分移入了 render 函数中。

我们尚未完成将数据传递进内部组件的任务,实际上我们像下面这样改进一点代码就行,也就是将所有东西导出成一个我们可复用的函数:

import useFetchData from '../composables/use-fetch-data';
import { defineComponent } from '@vue/composition-api';

export default () => defineComponent({
    setup() {
        const { loading, error, data, fetchData, hasData } = useFetchData();
        return {
            loading,
            error,
            data, fetchData,
            hasData
        }
    },
    mounted() {
        this.fetchData();
    },
    render() {
        return (
            <div>
                { this.loading && <div> Loading ... </div> }
                { this.error && <div> An Error occured, please try again </div> }
                { <div> { this.data } </div> }
            </div>
        )
    }
});

现在我们已经更上一层楼了,摆脱 SFC (单文件组件 -- Single File Component 文件) 后我们就可以真正的改进组织方式了。

在此阶段,我们使用 defineComponent 创建了一个使用 Composition API 的组件并依托 JSX/TSX 消除了模板部分。这种方式的妙处在于可以将一个组件视为一个函数并自如运用函数式编程范式(如一级函数、纯函数等等……)了。

举例来说,render 函数也包含了一个显示数据的 div,但想象下若将一个组件作为刚才所导出函数的一个参数,并在返回的 JSX/TSX 中使用它(将响应/数据作为属性传递给组件)是如何的呢。

看起来可能会是这样的:

import useFetchData from '../composables/use-fetch-data';
import { defineComponent } from '@vue/composition-api';
import { Component } from 'vue';

export default (component: Component) => defineComponent({
    setup() {
        const { loading, error, data, fetchData, hasData } = useFetchData();
        return {
            loading,
            error,
            data, fetchData,
            hasData
        }
    },
    mounted() {
        this.fetchData();
    },
    render() {
        const injectedComponentProps = {
            data: this.data
        }
        return (
            <div>
                { this.loading && <div> Loading ... </div> }
                { this.error && <div> An Error occured, please try again </div> }
                <component props={ injectedComponentProps } />
            </div>
        )
    }
});

现在我们正期待着将一个组件作为参数并在 render 函数中使用它。

还可以做得更多。

实际上,我们也可以期待将 useFetchData 函数作为所导出函数的一个参数。

import useFetchData from '../composables/use-fetch-data';
import { defineComponent, ComputedRef, Ref } from '@vue/composition-api';
import { Component } from 'vue';

interface FetchDataVars {
    loading: Ref<boolean>;
    error: Ref<boolean>;
    data: Ref<object>;
    fetchData: Function;
    hasData: ComputedRef<boolean>
}

type FetchData = () => FetchDataVars ;

export default (component: Component, factoryFetchData: FetchData) => defineComponent({
    setup() {
        const { loading, error, data, fetchData, hasData } = factoryFetchData();
        return {
            loading,
            error,
            data, fetchData,
            hasData
        }
    },
    mounted() {
        this.fetchData();
    },
    render() {
        const injectedComponentProps = {
            data: this.data
        }
        return (
            <div>
                { this.loading && <div> Loading ... </div> }
                { this.error && <div> An Error occured, please try again </div> }
                <component data={ injectedComponentProps } />
            </div>
        )
    }
});

借助这些改变,在组件之上,接受一个类型为 FetchData 并返回一组符合预期的变量/函数/计算值的 函数 作为参数,就可以使用包装过的新组件。

这是一种依托函数式途径达成的相当有用的替代继承/扩展的方法。所以,不同于扩展已有的组件并覆写组件的函数的是,我们可以真正传入期望的组件和函数了。Typescript 在此仅有助于强类型化和类型推断,所以只用 Javascript 也是足够的。

例如,如果我们想要使用它,看起来会是这样的:

import withLoaderAndFetcher from './components/withLoaderAndFetcher';


import useFetchDataForEndpointOne from './composables/useFetchDataForEndpointOne'
import useFetchDataForEndpointTwo from './composables/useFetchDataForEndpointTwo'
import useFetchDataForEndpointThree from './composables/useFetchDataForEndpointThree'


import ComponentA from './components/ComponentA.vue';
import ComponentB from './components/ComponentB.vue';
import ComponentC from './components/ComponentC.vue';


const composedA = withLoaderAndFetcher(ComponentA, useFetchDataForEndpointOne);
const composedB = withLoaderAndFetcher(ComponentB, useFetchDataForEndpointTwo);
const composedC = withLoaderAndFetcher(ComponentC, useFetchDataForEndpointThree);

我们将上例导出的函数称为 withLoaderAndFetcher 并使用其组合了 3 个不同的组件和 3 个不同的函数(装饰者模式)。

这项工作还能推进得更远,但我想展示的是达到这种状态的可能性并增加趋向函数式组合方式的方法数量。这只是示例代码,也可能不会工作得很好,但这种想法和概念才是要义。

干杯 :)

--End--

本文分享自微信公众号 - 云前端(fewelife),作者:云前端

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-09-23

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vuejs中父组件主动调用子组件的方法

    我们都知道,vue是单向流,但是有时候我们需要在父组件中主动通知子组件一些信息,使其做出一些响应变化,那么如何在父组件中去主动调用子组件的方法呢?Vue当然给我...

    飞奔去旅行
  • vuejs+ts+webpack2框架的项目实践

    没有什么框架是全能的,都有其适用场景。我们的最初的定位一定要围绕我们的业务来选择。

    小时光
  • vuejs + ts + webpack 2 框架的项目实践

    没有什么框架是全能的,都有其适用场景。我们的最初的定位一定要围绕我们的业务来选择。我们个性化业务是基于移动端的多页面应用。我们综合考虑之后,决定使用vuejs+...

    王鹤
  • 我为什么不再用 Vue,而改用 React?

    当我走进现代前端开发行业的时候,我做了一个每位开发人员都要做的决策:选择一个合适的框架。当时正逢 jQuery 被淘汰,前端开发者们不再用它编写难看的、非结构化...

    逆锋起笔
  • 【译】Angular中,向子组件传值的5种方式

    翻译:http://blog.briebug.com/5-ways-to-pass-data-into-child-components-in-angular ...

    申君健
  • Vue 3.0对Web开发的影响

    去年11月,Vue创建者Evan You展示了Vue 3.0的关键更新 - 这是不断上升的Javascript框架的最新版本。 这些优化使Vue更高效,模块化且...

    grain先森
  • Vuejs开发过程中一些常见问题的解决方法

    在看demo的时候看到在vue-router写着keep-alive,keep-alive的含义: 如果把切换出去的组件保留在内存中,可以保留它的状态或避免重新...

    javascript.shop
  • 前后端通吃,vue大全Mark一下

    仓库地址:https://github.com/opendigg/awesome-github-vue

    java乐园
  • 十、VueJs 填坑日记之在项目中使用Amaze UI

    上一篇博文,我们把jQuery集成到了项目中,今天我们来集成Amaze ui(妹子UI)。先来介绍一下妹子UI。Amaze UI 含近 20 个 CSS 组件、...

    I Tech You_我教你
  • 【编程鹿】学Vue.js这一篇就够了「万字学会|通俗易懂」上篇

    在MVVM之前,开发人员从后端获取需要的数据模型,然后要通过DOM操作Model渲染到View中。而后当用户操作视图,我们还需要通过DOM获取View中的数据,...

    鹿老师的Java笔记
  • 一、VueJs 填坑日记之基础概念知识解释

    概述 在最开始听说vuejs这个词是在2016年,当时天真的认为自己是个后端开发工程师不需要学习太多的前端知识,不过紧接着在2017年在公司就用到了vuejs。...

    I Tech You_我教你
  • vuejs中的组件以及父子组件间通信传值

    您将在本文当中了解到,往网页中添加数据,从传统的dom操作过渡到数据层操作,实现同一个目标,两种不同的方式.以及什么是组件,如何定义和使用组件,父子组件之间如何...

    itclanCoder
  • 在小程序中实现 Mixins 方案

    在原生开发小程序的过程中,发现有多个页面都使用了几乎完全一样的逻辑。由于小程序官方并没有提供 Mixins 这种代码复用机制,所以只能采用非常不优雅的复制粘贴的...

    Fundebug
  • 在 Vue.js 中制作自定义选择组件

    定制 select 标签的设计非常困难。有时候,如果不使用样式化的 div 和自定义 JavaScript 的结合来构建自己的脚本,那是不可能的。在本文中,你将...

    疯狂的技术宅
  • 18 个漂亮的 Bootstrap 模板

    本文中出现的所有日期和数字在撰写本文时都是正确的。要查找最新信息,请点击文章中的链接。

    疯狂的技术宅
  • 快速上手VueJS动画

    动画可以使您的网站更具现代感,而且还能为网站带来更好的用户体验。幸运的是,对于开发人员来说,VueJS动画只需几分钟即可完成设置。

    前端知否
  • 国庆节前端技术栈充实计划(7):为 Vue 项目写单元测试

    众所周知,Vue.js 是一个非常牛逼的 JavaScript 框架,对于创建复杂功能的前端项目是非常有用的。不管是什么项目,检查应用是否正常工作,运行是否为预...

    疯狂的技术宅
  • VueJs开发笔记—IDE选择和优化、框架特性、数据调用、路由选项及使用

    一、IDE的选择:   VsCode和WebStorm都是不错的选择,说一下两者的优缺点,调试便捷性来说两者不相上下.   WebStorm缺点:性能方面VsC...

    Java中文社群-磊哥
  • Vue中组件间通信的方式

    这种组件通信的方式是我们运用的非常多的一种,props以单向数据流的形式可以很好的完成父子组件的通信,所谓单向数据流,就是数据只能通过props由父组件流向子组...

    WindrunnerMax

扫码关注云+社区

领取腾讯云代金券