vue 基础- extends 实现代码复用

前言

《vue 基础》系列是再次回炉 vue 记的笔记,除了官网那部分知识点外,还会加入自己的一些理解。(里面会有部分和官网相同的文案,有经验的同学择感兴趣的阅读)

extends选项/组合 类别下的选项属性之一,而不是 Vue.extend 全局 API,这个事先说下,以免概念上有个混淆。

代码复用

目前的前端有个非常重要的思想,就是“组件化”,对于代码层面就是最终 html、css、js 这些元素都会被挪到一起来实现一个较为完整的功能。就比如 element-ui ,若你想实现一个分页栏,直接拿 <el-pagination> 就可以搞定。

如果你要对数据进行过滤处理、通过标签有些特殊功能,对应可以自定义一些过滤器、指令。

这些举例都有个共同的特性就是 代码复用 。那些随处可见的好处就不说了。这里提个问题,怎么在 vue 里只针对 js 功能进行复用呢?(可能讲的有些局限)

答案就是 extends ,一个普普通通的属性,可我在掉了一撮头发后才用到。

extends

类型可是:Object | Function

允许声明扩展另一个组件(可以是一个简单的选项对象或构造函数),而无需使用 Vue.extend。这主要是为了便于扩展单文件组件。这和 mixins 类似。

场景

简单举几个例子

使用在 lifecycle 生命周期上

有一些需求(例如,控制 mint-ui loadmore 组件的高度),当元素挂载到 dom 节点后,需要控制页面某些区域的固定高度。

以前我们是这样做的,所有需要控制高度的页面都有这段类似的代码。

那当使用了 extends 后,就可以简化成:

使用 extends 调用封装方法 heightControl ,哪个 vue 模块要用就添加这行代码就行了 :

heightControl 就是原来的 mounted 中全部的定义:

简化 methods 方法

再举一个例子,我们会有注册、忘记密码有获取短信的功能,他们在接口一样,参数类似。那么就会在两个页面上有相似度 99% 的模板化代码(boilerplate code)。

那当使用了 extends 后,就可以简化成:

重写 methods 属性,将公用获取短信的方法列出,实现一个较为公用化的发送短信功能:

总结

通过这两个例子,说了下 extends 简单的场景运用,例子虽少,但的确是我平时优化后觉得很有用的实践。相信通过该属性能让代码的复用性更高,减轻以后的工作量。

如果你能 get 到其中的点,并觉得此文有帮助,就分享给其他同学吧。

【长按关注】看看↓↓↓?
Eminoda wechat
【前端雨爸】分享前端技术实践,持续输出前端技术文章
欢迎留言,评论交流,一起讨论前端问题
📢 因为是开源博客,为避免 Gitalk授权 带来的 安全风险,也可访问