记录--9个封装Vue组件的小技巧
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助
组件是前端框架的基本构建块。把它们设计得更好会使我们的应用程序更容易改变和理解。在这节课中,分享一下在过去几年中工作中学到的 9 个技巧。
1. 你可能不需要创建一个组件
在创建一个组件之前,看看它是为了可重用性和为某些UI添加一个状态,还是仅仅为了组织和划分代码。
如果是后者,那么你就不需要创建它,因为它只会增加更多不必要的工作,比如传递props
和发射事件。
不仅如此,它还要求我们跳转到该文件以查看它所包含的内容,而不是直接在父组件中看到它,这就干净多了。
2. 使用插槽而不是 prop 来显示内容
假设有一个可重复使用的按钮组件,它通过props
获取文本。
<BaseButton label="Delete Item"/>
如果想在其中显示一个图标,必须添加更多的道具,如<BaseButton label="Delete Item" icon="delete" />
并更新组件以显示该图标。
但有了插槽,我们就可以在每次使用该组件时,以想要的方式显示标签:
<BaseButton>
Delete Item <Icon name="delete" />
</BaseButton>
或者你只需要把某个单词加粗。对于插槽,可以直接在文本中使用<strong>
标记,而不是在组件中解析它。
3. 将该组件与触发它的因素分组
有时有两个独立的组件在某种情况下一起使用。最好把它们放在一个新的组件中,这样重复使用和移动它们更容易。
一个常见的例子是 Modal
组件。我们通常在点击一个特定的按钮时显示Modal
。与其在每次我们想重用它(或把它移到其他地方)时添加showModal
状态和导入modal与它的按钮,不如有一个单一的组件来显示按钮,当用户点击时,它显示相关的modal。
<!-- CreateItemButton.vue -->
<template>
<Modal v-if="showModal" @close="showModal = false" />
<BaseButton @click="showModal = true">
Create Item
</BaseButton>
</template> <script setup>
const showModal = false
</script>
4. 使用 teleport,从任何地方显示固定位置的元素
继续前面的例子,如果我们想正确地显示 modal ,我们需要确保模态使用正确的z-index
,并且它在HTML代码中显示在正确的位置,所以它总是显示在页面上所有东西的上面。
我们可以通过直接将 modal 显示为<body>
元素的一个子元素来轻松地避免这个问题,无论我们在组件结构中使用它。
Teleport组件使我们能够做到这一点。
我们所要做的就是用 <Teleport to="body">
来包装 modal 组件。
<!-- BaseModal.vue -->
<template>
<Teleport to="body">
<div class="modal"></div>
</Teleport>
</template>
这个组件是Vue 3内置组件的一部分。如果你使用的是Vue 2,请查看PortalVue。
5. 在一个对象中分组相关的 props
组件的 prop 列表是组件界面的一个主要部分。接口越清晰,就越容易使用和推理。
改进 prop
列表的一个方法是将相关的属性分组在一起。以这个组件为例:
<PostCard
:title="post.title"
:date="post.date"
:layout="currentLayout"
:image="post.imageUrl"
<!-- more props -->
/>
我们需要花几秒钟时间来了解这里有哪些 props
与帖子(post )相关。但我们可以像这样把与帖子相关的 props
分组,使之更加清晰。
<PostCard :post="post" :layout="currentLayout" />
所以现在我们很快就知道,layout
不是 post
数据的一部分。
不仅如此,我们还通过这种方法使更新 props
变得更加容易。例如,添加或删除与帖子相关的props
,不需要我们更新组件的 props
列表。
6. 赋予每个循环item,赋予自己的状态
创建一个新的组件的一个很好的理由是给一块用户界面提供它自己的状态。我们需要这样做的一个常见的地方是在v-for
循环中:
<template>
<div>
<div v-for="(item, index) in items" :key="item.id">
<input type="checkbox" v-model="checkedItems[index]">
</div>
</div>
</template>
<script setup>
const checkedItems = ref(items.map(item => item.checked))
</script>
为了跟踪检查过的 items
,我们不得不创建一个数组,并用 items
的初始值来填充它。但是这段代码还不够强大。为了让它变得更好,我们必须让 items
通过它们的id
而不是index
来访问,因为 index
是不可靠的,可以改变。例如,如果你添加一个支持通过拖放来重新排列items 的功能呢?
为了简化这段代码,我们可以引入一个新的组件,为每个 item
保存一个状态。像这样:
<template>
<div>
<Item v-for="item in items" :key="item.id" :item="item" />
</div>
</template>
Item
组件内容如下:
<template>
<div>
<input type="checkbox" v-model="checked">
</div>
</template> <script setup>
const props = defineProps({ item: Object })
const checked = ref(props.item.checked)
</script>
这种方法的另一个好处是,我们把所有 item 的相关数据、计算属性和方法都加在一个地方,便于理解和改变。
7. 尽可能地将加载数据移至其用户界面附近
无论你是用GraphQL还是其他API加载,最好把代码放在尽可能接近使用它的用户界面的地方。这有两个原因:
移动带有数据的UI组件变得更加容易。只需移动该组件,而无需寻找其依赖关系。
当所有的碎片被放在一个地方时,总是更容易理解代码--可以看到用户界面和它的数据来自哪里。
有时,有多个组件使用同一个获取的数据。在这种情况下,可以将获取的代码上移一级。因此,会有一个父组件,在那里获取数据,还有一个子组件,然后把数据传递给它。
但一定要确保它是一个单一的层次。如果不是,那就寻找一种方法来改进你的组件设计和它们之间的关系。
8. 纯粹的UI组件不应访问应用程序的状态
有两种类型的前端组件:纯UI组件和特定应用组件。
纯粹的UI组件是像按钮、输入框等。它们不应该知道关于应用程序的任何事情。它们的工作仅仅是为了显示UI--它们通过 props 获取数据。
特定于应用程序的组件是知道应用程序状态的组件,无论是本地状态还是全局状态(通过状态管理库,如Pinia)。
分离这些组件使得在应用程序的其他地方,甚至在其他应用程序中重用UI组件更加容易。
如果你正在构建自己的UI组件,这个技巧也适用。如果你使用的是外部库,如 Vuetify
或Quasar,那么你就不必担心这个问题--这些组件在设计时就考虑到了这一点。
9. 不要在组件中指定 width 或 margin
当创建一个组件时,你应该把它看作是一块UI,可以像其他本地元素一样使用。
让用户指定组件周围的空间是实现这一目标的好方法。
假设你的组件在其根元素上有一个顶部边距,而用户想把它显示在某个元素下面,但没有顶部边距。要做到这一点,用户必须设置一个与组件的margin
相同的负margin
,比如margin-top: -50px;
更不用说在某些情况下,用户必须与选择器的特异性相匹配(或者可能使用!important
)。
而宽度也是如此。如果用户想让该组件具有响应性,他们必须覆盖其宽度和最大宽度。
因此,通过不在组件内部设置宽度和边距,总是给用户这种控制是有意义的。
代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。
本文转载于:
https://juejin.cn/post/7158969880362876964
如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。
记录--9个封装Vue组件的小技巧的更多相关文章
- 封装Vue组件的一些技巧
封装Vue组件的一些技巧 本文同步在个人博客shymean.com上,欢迎关注 写Vue有很长一段时间了,除了常规的业务开发之外,也应该思考和反思一下封装组件的正确方式.以弹窗组件为例,一种实现是在需 ...
- 手把手教你封装 Vue 组件,并使用 npm 发布
Vue 开发插件 开发之前先看看官网的 开发规范 我们开发的之后期望的结果是支持 import.require 或者直接使用 script 标签的形式引入,就像这样: // 这里注意一下包的名字前缀是 ...
- 手把手教你封装 Vue 组件并使用 NPM 发布
Vue 开发插件 我们可以先查看Vue的插件的开发规范 我们开发的之后期望的结果是支持 import.require 或者直接使用 script 标签的形式引入,就像这样: ps: 这里注意一下包的名 ...
- 自己封装 vue 组件 和 插件
vue 组件 一.组件的创建,两种方法.(本质上是1.2两种,vue文件,只是创建了一个 组件选项对象,仅是一个js对象)1.定义组件:Vue.component('button-counter', ...
- 总结一下vue里一些小技巧
官方里的我就不细说了,自个撸文档就成,下面是实践里常用的几个小技巧或者说是遇到的坑,若有错误望大家指正)1.当用a标签设置新窗口打开页面,设置url时,建议给href进行v-bind绑定,然后写相对路 ...
- vue 使用中的小技巧 (一)
在vue的使用过程中会遇到各种场景,当普通使用时觉得没什么,但是或许优化一下可以更高效更优美的进行开发.下面有一些我在日常开发的时候用到的小技巧 data 和 Object.freeze 每个Vue实 ...
- Vue 使用中的小技巧
在vue的使用过程中会遇到各种场景,当普通使用时觉得没什么,但是或许优化一下可以更高效更优美的进行开发.下面有一些我在日常开发的时候用到的小技巧,在下将不定期更新~ 1.多图表resize事件去中心化 ...
- 关于Vue的一些小技巧
前言 用Vue开发一个网页并不难,但是也经常会遇到一些问题,其实大部分的问题都在文档中有所提及,再不然我们通过谷歌也能成功搜索到问题的答案,为了帮助小伙伴们提前踩坑,在遇到问题的时候,心里大概有个谱知 ...
- Vue 使用中的小技巧(山东数漫江湖)
在vue的使用过程中会遇到各种场景,当普通使用时觉得没什么,但是或许优化一下可以更高效更优美的进行开发.下面有一些我在日常开发的时候用到的小技巧,在下将不定期更新~ 1. 多图表resize事件去中心 ...
- vue中实用小技巧,长期更新
1.在vue 中使用webpack require.context工程化配置组件,不用一个一个import注册了 main.js中 import Vue from 'vue'//使用lodsh插件im ...
随机推荐
- [Ngbatis源码学习]Ngbatis源码阅读之连接池的创建
Ngbatis源码阅读之连接池的创建 1. NebulaPool的创建 NgbatisBeanFactoryPostProcessor 这个类实现了 BeanFactoryPostProcessor ...
- Ubuntu下SSH管理及SFTP下载工具Muon(Snowflake)
简介 Muon其实更像是一个基于ssh的服务器管理工具, 界面中有PAC Manager的影子, 集成了文件管理, ssh命令行, 服务器性能监测和工具包等功能. 因为这个工具的编写语言是Java, ...
- Map与WeakMap
Map与WeakMap Map对象用来保存键值对,并且能够记住键的原始插入顺序,任何对象或者原始值都可以作为键或者是值. WeakMap对象同样用来保存键值对,对于键是弱引用的而且必须为一个对象,而值 ...
- centos7创建MySQL自动备份脚本
说明 最近需要给wordpress站点搞一个定时备份mysql数据库,所以记录一下. 操作步骤 1.创建备份脚本 这一步最重要,创建目录:/home/wpblog_backup,然后在目录下创建she ...
- oracle 使用comment语句添加表注释
使用oracle comment语句可以给表.字段.视图等对象添加备注信息. 大致语法为: comment on TABLE table_name IS '备注内容'; 权限要求: 默认情况下用户只能 ...
- jupyter环境变量配置与启动
一.jupyter基础知识 1.基本概念 jupyter是基于网页的用于交互计算的应用程序.其可被应用于全过程计算:开发.文档编写.运行代码和展示结果. 编程时具有语法高亮,缩进,tab补全的功能. ...
- win32-制作mini dump文件
一个完整的用户模式dump是基本的用户模式转储文件. 此转储文件包括进程的整个内存空间,程序的可执行映像本身,句柄表以及其他信息,这些信息对于调试器在重建转储发生时正在使用的内存中很有用. 可以将完整 ...
- kafka学习笔记03-消息生产者producer
kafka学习笔记03-消息生产者producer 发送消息整体流程示意图 消息发送的流程示意图: (From:High-level overview of Kafka producer compon ...
- Springboot集成Disruptor做内部消息队列
一.基本介绍 Disruptor的github主页:https://github.com/LMAX-Exchange/disruptor 1,什么是 Disruptor? (1)Disruptor 是 ...
- iOS 面向对象与类
至于未来会怎样,要走下去才知道反正路还很长,天总会亮. 1. 面向对象 1.1 什么是面向对象(OOP) 面向对象 Object Oriented Programming.在软件开发中,我们虽然用的是 ...