Vue高阶组件的原理以及实践

前言

高阶组件在许多使用Vue框架进行开发的前端工程师的印象中，大部分都比较陌生。Vue官网也没有推出这一方案的使用，大概是官方也觉得不好用。但这不影响我们来学习高阶组件的这种思维，看完本篇希望你对高阶组件有基本的认识。

高阶组件

高阶组件让我们想到一个函数式编程常会出现的类似名称的“高阶函数”。

高阶函数：为一个函数接受一个函数并返回一个新函数，使得新函数具有这个函数原先的功能又能够自定义的添加新的功能。

同样，高阶组件也具备与高阶函数一样的性质。高阶组件：接受一个组件并返回一个组件，这个组件具有原组件的功能，并拥有了新自定义的功能。以下我们一起实现一个简单的高阶组件:

假设我们有一个需求，有一个渲染列表，每个列表都为一个图片以及一些文本信息，其模板结构为：

<template>
    <div>
        <img src="https://avatars.githubusercontent.com/u/71475868?s=40&u=8e47a668961f89a6389d9775cffdabddfda76e8c&v=4" />
            <div> 用户名称 </div>
    </div>
</template>
​

其中用户名称需要我们得到用户的ID发起请求再去获取,每个列表元素从父组件中拿到图片的URL,用户名称，以及用户ID,以下为实例代码。

<template>
    <div> 
        <smart-avatar :id="