一个鲜为人知的高性能组件注册及实现组件排序技巧

image

背景

在使用Vue的路途中,你一定知道如何去注册并调用一个组件

通常我们会通过三个步骤来实现调用组件的一整个流程

  • 通过import引入组件
  • 在父组件的组件对象components中将导入的子组件注册
  • 在父组件中使用该组件
<template>
  <div>
    <Child msg="Hello World!"/>
  </div>
</template>

<script>
import Child from "../components/Child";

export default {
  name: "page",
  components: {
    Child
  }
};
</script>

这可能是80%Vue友最常见的一个使用子组件的模式,没错,我也经常这么干...如果你用腻了这种方式,想换个新奇的,接着往下走,我们再学习两个不常用的但又很高效的使用方式,提升开发逼格。

场景预设1

想象一下一个会员中心组件,有一部分区域用来展示会员与会员差异的相关展示模块,但是这两个只会展示其中一个,会员与非会员。假设我们现在有MemberInfo以及UserInfo两个组件,我们想根据用户身份进行对应模块显示

实现方案1

这可能是大部分前端玩家会想到的实现方式,包括我自己也常常会如此(捂脸)

<template>
  <div class="container">
    <button @click="isMember = !isMember">{{isMember?'我不想要会员了,哼':'我要成为会员'}}</button>
    <UserInfo v-if="!isMember"/>
    <MemberInfo v-else/>
  </div>
</template>

<script>
import UserInfo from "../components/UserInfo";
import MemberInfo from "../components/MemberInfo";

export default {
  name: "user",
  data() {
    return {
      isMember: false
    };
  },
  components: {
    UserInfo,
    MemberInfo
  }
};
</script>
image

实现方案2

通过阅读官方文档,我们会发现Vue有提供一个内置组件 component ,渲染一个“元组件”为动态组件。根据is的值,来决定哪个组件被渲染。如果你对此还不太了解,文末会奉上官网传送门.

<template>
  <div class="container">
    <button @click="isMember = !isMember">{{isMember?'我不想要会员了,哼':'我要成为会员'}}</button>
    <component :is="userComponentName" title="component就是好用哟"/>
  </div>
</template>

<script>
import UserInfo from "../components/UserInfo";
import MemberInfo from "../components/MemberInfo";

export default {
  name: "userComponent",
  data() {
    return {
      isMember: false
    };
  },
  components: {
    UserInfo,
    MemberInfo
  },
  computed: {
    userComponentName() {
      let { isMember } = this;
      return isMember ? "member-info" : "user-info";
    }
  }
};
</script>
image

从方案1过渡到方案2 ,很明显我们通过计算属性配合内置组件component完美剔除了v-if/v-else的逻辑判断,也可以正常做数据传递

只是从现在看来,除了使用方法改变了,没有啥差异了。这并不是本次想介绍的。现有的两个模块组件,我们仍然必须先导入并注册才能完成调用。现在,我们就不想提前注册好所需使用的子组件,因为太麻烦了并且浪费性能,我们想尝试动态导入注册使用,让我们继续往下,冲冲冲!

实现方案3

<template>
  <div class="container">
    <button @click="isMember = !isMember">{{isMember?'我不想要会员了,哼':'我要成为会员'}}</button>
    <component :is="userComponentImstance" title="component就是好用哟"/>
  </div>
</template>

<script>
export default {
  name: "userImport",
  data() {
    return {
      isMember: false
    };
  },
  computed: {
    userComponentImstance() {
      let { isMember } = this;
      let pathName = isMember ? "MemberInfo" : "UserInfo";
      //通过import动态导入组件 配合webpack实现组件分离
      return () => import(`../components/${pathName}`);
    }
  }
};
</script>

可以看到,我们不再是提前导入注册组件的形式来调用了,component直接给其提供一个完整的组件对象
通过阅读官方文档我们可以看到 is接收两种选项之一:

  • 注册的组件名称
  • 组件对象

现在,我们通过动态import的形式导入了子组件,配合computed按条件渲染对应的子组件,谁用谁知道。只有在程序运行的时候才会进行,就省去了我们预先导入和注册组件的形式,这样的效果是不是跟使用第三方组件的时候按需加载有个似曾相识的味道..嗯是的,包括我们为了对SPA性能优化的时候router懒加载有着异曲同工之妙。

当我们改变isMember这个变量就可以实现动态切换组件了。这样做的好处在于,当我们使用动态导入的时候,webpack会将与导入函数匹配的每个文件单独创建一个chunk,也就是我们常说的分包加载,而不会一次性加载全部组件。当前样例并不能看出具体有多大的性能提升,但实际开发中,这个优势会非常明显。

如果你熟悉webpack你可以很好的利用这点对代码进行拆分和DIY属于自己程序的一个加载策略。具体可以通过了解Code Splitting

场景预设2

之前遇到过一个需求,就是给商城首页的几个活动模块根据后端返回顺序依次渲染,当时没想明白怎么实现。而现在,当你看到这里的时候,我想你大概有一点点小思路了吧。(如果没有,那一定是我的错,文章写的不够清晰)。现在知道了内置组件component以及我们的动态加载,我们完全可以很轻松的实现。

假设我们父组件为Home主页面,可能存在Seckill秒杀、Group团购、Limit限购、Bargain砍价四个活动模块,模块展示及排序均由数据决定,而不再是我们hard coded

<template>
  <div>
    <p>假装这是一个商城首页</p>
    <button @click="shuffle">随机切换模块顺序</button>
    <component :is="item.imstance" v-for="(item ,i) in componentImstances" :info="item" :key="i"/>
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      moduleList: [
        {
          type: "Bargain",
          title: "砍价",
          startTime: "2019-12-01",
          endTime: "2019-01-01"
        },
        {
          type: "Seckill",

          title: "秒杀",
          startTime: "2019-12-05",
          endTime: "2019-01-01"
        },
        {
          type: "Limit",

          title: "限购",
          startTime: "2019-12-07",
          endTime: "2019-01-01"
        },
        {
          type: "Group",
          title: "团购",
          startTime: "2019-12-11",
          endTime: "2019-01-01"
        }
      ]
    };
  },
  components: {},
  methods: {
    shuffle() {
      let { moduleList } = this;
      let resultArr = [];
      while (moduleList.length > 0) {
        var index = Math.floor(Math.random() * moduleList.length);
        resultArr.push(moduleList[index]);
        moduleList.splice(index, 1);
      }
      this.moduleList = resultArr;
    }
  },
  computed: {
    componentImstances() {
      let { moduleList } = this;
      return moduleList.map(item => {
        item.imstance = () => import(`../components/${item.type}`);
        return item;
      });
    }
  }
};
</script>
image

这样就实现了我们的活动模块的自定义排序了,但是目前我们的模块动态导入是根据后端返回数据来加载的,没有人会知道中间会不会出现什么幺蛾子,为了避免动态导入的组件在未知情况下加载失败,我们可以去做一个异常模板提示。
将上面中的componentImstances稍作修改:

computed: {
    componentImstances() {
      let { moduleList } = this;
      return moduleList.map(item => {
        item.imstance = () => {
          return new Promise((resove, reject) => {
            let imstance = import(`../components/${item.type}`);
            imstance.then(res => {
              resove(res);
            });
            imstance.catch(e => {
              resove(import("../components/Error"));
            });
          });
        };
        return item;
      });
    }
  }
image

我们将动态导入异常的组件捕获并输出默认模板,用户体验嘛肯定是你的夙愿

参考:

Vue内置组件

webpack

总结

灵活运用component以及import,如果一个组件有许多不同的试图,那这是很有用的,易于扩展。因为它是异步的,仅在需要的时候才加载模板,使代码更加轻量。题外话,component配合keep-alive来缓存组件,效果也是顶呱呱噢,本文不再赘述。相关演示源码已更新到Github传送门

❤️ 最后

如果你觉得这篇内容对你挺有启发:

分享出去让更多的人也能看到这篇内容(欢迎点赞关注😊)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,233评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,013评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,030评论 0 241
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,827评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,221评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,542评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,814评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,513评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,225评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,497评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,998评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,342评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,986评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,055评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,812评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,560评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,461评论 2 266

推荐阅读更多精彩内容

  • 基于Vue的一些资料 内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 element★...
    尝了又尝阅读 1,119评论 0 1
  • 本文章是我最近在公司的一场内部分享的内容。我有个习惯就是每次分享都会先将要分享的内容写成文章。所以这个文集也是用来...
    Awey阅读 9,200评论 4 67
  • 什么是组件? 组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装...
    youins阅读 9,399评论 0 13
  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 2,124评论 0 6
  • UI组件 element- 饿了么出品的Vue2的web UI工具套件 Vux- 基于Vue和WeUI的组件库 m...
    35eeabfa0772阅读 3,203评论 7 12