vue 基础- extend 实现代码复用

前语

《vue 根底》系列是再次回炉 vue 记的笔记,除了官网那部分知识点外,还会参加自己的一些了解。(里边会有部分和官网相同的案牍,有经历标签14的同学择感兴趣的阅览)

extends选项/组合 类别下的选项特点之一,而不是 Vue.extend 大局 API,这个事前说下,避免概念上有个混杂。

代码复用

现在的前端有个非常重要的思维,便是“组件化”,关于代码层面便是终究 html、css、js 这些元素都会被挪到一起来完成一个较为完好的功用。就比方 element-ui ,若你想完成一个分页栏,直接拿 就能够搞定。

假如你要对数据进行过滤处理、经过标签有些特别功用,对应能够自界说一些过滤器、指令。

这些举例都有个共标签11同的特性便是 代码复用 。那些随处可见的优点就不说了标签10。这儿提个问题,怎样在 vue 里只针对 js 功用进行复vue 根底- extend 完成代码复用用呢?(可能讲的有些限制)

答案便是 extends ,一个普普通通的特点,可我在掉了一撮头发后才用到。

extends

类型但是:Object | Function标签20

答应声明扩展另一个组件(能够是一个简略的选项目标或结构函数),而无需vue 根底- extend 完成代码复用运用 Vue.extend。这首要是为了便于扩展单文件组件。这和 mixins 类似。

场景

简略举几个比如


运用在 lifecycle 生命周期上

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

曾经咱们是这样做的,一切需求操控高度的页面都有这段类似的代码。

那当运用了 vue 根底- extend 完成代码复用extends 后,就能够简化成:

运用 extends 调用封装办法 heightControl ,哪个 vue 模块要用就增加这行代码就行了 :

heightControvue 根底- extend 完成代码复用l 便是本来的 mounted 中悉数的界说:


简化 methods 办法

再举一个比如,咱们会有注册、忘掉暗码有获取短信的功用,他们在接口相同,参数类似。那么就会在两个页面上有类似度 99% 的模板化代码。

那当运用了 extends 后,就能够简化成:

重写 methods 特点,将共用获取短信的办法列出,实vue 根底- extend 完成代码复用现一个较为共用化的发送短信功用:

总结

经过这两个比如,说了下 extends 简略的场景运用,比如虽少,但的确是我平常优化后觉得很vue 根底- extend 完成代码复用有用的实践。信任经过该特点能让代码的复用性更高,减轻今后的工作量。

假如你能 get 到其间的点,并觉得此文有协助,就共享给其他同学吧。

关于我

一位“前端工程师”,乐于实践,并共享前端开发经历。

假如有问题或许主意,欢迎各位谈论留言,愿我们vue 根底- extend 完成代码复用共同进步。

重视【前端雨爸】,查阅更多前端技能心得。

Write a Comment

电子邮件地址不会被公开。 必填项已用 *标注