vue的组件封装选择个人之见

2023-12-10 09:38

本文主要是介绍vue的组件封装选择个人之见,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

  现在的编程开发中,组件化开发越来越常态化,并且许多人在实际开发中直接一开始就是封装一大堆的各种组件,然后再把各种组件按照需求往主体中进行各种加塞。
         其实,我们在实际开发中,很多时候接到的需求其实是对已经存在的项目进行优化、拓展或者说升级,这种已经有的项目框架部分已经决定好了你接下来的主要技术栈,如果脱离了现在已经投入项目适用的技术栈来进行后面拓展功能开发的话,很容易存在各种问题,比如说:页面主体风格,框架样式冲突,各功能页面交互...所以,一定要综合考虑这些问题之后再决定用什么技术栈进行开发。
         总体而言,原生js是能很愉快并且很顺利的兼容其他绝大部分前端框架的,现在的主体前端框架在同技术栈中只需要注意部分组件的版本冲突也能很顺利的进行后续开发。
         接下来就是组件开发的选择与控制。在之前的开发中,我们绝大多数人很喜欢将所有的功能都集中在主体页面,把一些无关紧要的板块或者功能模块封装成组件放一边。**但是假如我们遇到这种情况怎么处理呢:我有个页面,在该页面有四五个数据表格,每个数据表格内容不同,功能需求也不同**,但总体都离不开增删改查,一个表格的增删改查不算多,但四个五个或者更多的时候,那代码的行数绝对会是个很感人的数字。 
         我们还有种情况:一开始就将各种功能直接进行组件化封装,但经常会遇到在同一个页面调用多个组件的时候各种参数多的让人欲仙欲死,如果组件的层级再多那么一丢丢,父子组件之间、兄弟组件之间,三级组件和一级组件之间、然后子组件的子组件的子组件....那其中的参数传递与处理绝对会让你感天动地!
         经过大大小小的各种项目折磨之后,就个人总结而言,觉得组件不要太多,够用就好,组件也不要特意去往少里控制,保证每个页面文件的代码行数在最适合维护的量就好。因为我们的项目不是一投产就不管不问了的,经常会在投产之后进行各种维护与修改调整,如果一个某个页面文件的代码行数过多,就会增加代码的维护难度;但如果组件过多,也容易在后面维护的时候造成参数传递出问题。
          因此,我们可以遵循如下规则:在保证参数传递尽量简洁且数量少的情况下,进可能的进行组件化开发;如果参数传递比较复杂并且数据处理麻烦的话,就尽量在功能的主体页面上进行开发,不要刻意去追求组件化封装来增加自己的工作量。

这篇关于vue的组件封装选择个人之见的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/476733

相关文章

CSS3 布局样式及其应用举例

《CSS3布局样式及其应用举例》CSS3的布局特性为前端开发者提供了无限可能,无论是Flexbox的一维布局还是Grid的二维布局,它们都能够帮助开发者以更清晰、简洁的方式实现复杂的网页布局,本文给... 目录深入探讨 css3 布局样式及其应用引言一、CSS布局的历史与发展1.1 早期布局的局限性1.2

使用animation.css库快速实现CSS3旋转动画效果

《使用animation.css库快速实现CSS3旋转动画效果》随着Web技术的不断发展,动画效果已经成为了网页设计中不可或缺的一部分,本文将深入探讨animation.css的工作原理,如何使用以及... 目录1. css3动画技术简介2. animation.css库介绍2.1 animation.cs

CSS引入方式和选择符的讲解和运用小结

《CSS引入方式和选择符的讲解和运用小结》CSS即层叠样式表,是一种用于描述网页文档(如HTML或XML)外观和格式的样式表语言,它主要用于将网页内容的呈现(外观)和结构(内容)分离,从而实现... 目录一、前言二、css 是什么三、CSS 引入方式1、行内样式2、内部样式表3、链入外部样式表四、CSS 选

使用雪花算法产生id导致前端精度缺失问题解决方案

《使用雪花算法产生id导致前端精度缺失问题解决方案》雪花算法由Twitter提出,设计目的是生成唯一的、递增的ID,下面:本文主要介绍使用雪花算法产生id导致前端精度缺失问题的解决方案,文中通过代... 目录一、问题根源二、解决方案1. 全局配置Jackson序列化规则2. 实体类必须使用Long封装类3.

PyQt6中QMainWindow组件的使用详解

《PyQt6中QMainWindow组件的使用详解》QMainWindow是PyQt6中用于构建桌面应用程序的基础组件,本文主要介绍了PyQt6中QMainWindow组件的使用,具有一定的参考价值,... 目录1. QMainWindow 组php件概述2. 使用 QMainWindow3. QMainW

Nginx部署React项目时重定向循环问题的解决方案

《Nginx部署React项目时重定向循环问题的解决方案》Nginx在处理React项目请求时出现重定向循环,通常是由于`try_files`配置错误或`root`路径配置不当导致的,本文给大家详细介... 目录问题原因1. try_files 配置错误2. root 路径错误解决方法1. 检查 try_f

在React聊天应用中实现图片上传功能

《在React聊天应用中实现图片上传功能》在现代聊天应用中,除了文字和表情,图片分享也是一个重要的功能,本文将详细介绍如何在基于React的聊天应用中实现图片上传和预览功能,感兴趣的小伙伴跟着小编一起... 目录技术栈实现步骤1. 消息组件改造2. 图片预览组件3. 聊天输入组件改造功能特点使用说明注意事项

一文详解如何在Vue3中封装API请求

《一文详解如何在Vue3中封装API请求》在现代前端开发中,API请求是不可避免的一部分,尤其是与后端交互时,下面我们来看看如何在Vue3项目中封装API请求,让你在实现功能时更加高效吧... 目录为什么要封装API请求1. vue 3项目结构2. 安装axIOS3. 创建API封装模块4. 封装API请求

全解析CSS Grid 的 auto-fill 和 auto-fit 内容自适应

《全解析CSSGrid的auto-fill和auto-fit内容自适应》:本文主要介绍了全解析CSSGrid的auto-fill和auto-fit内容自适应的相关资料,详细内容请阅读本文,希望能对你有所帮助... css  Grid 的 auto-fill 和 auto-fit/* 父元素 */.gri

exfat和ntfs哪个好? U盘格式化选择NTFS与exFAT的详细区别对比

《exfat和ntfs哪个好?U盘格式化选择NTFS与exFAT的详细区别对比》exFAT和NTFS是两种常见的文件系统,它们各自具有独特的优势和适用场景,以下是关于exFAT和NTFS的详细对比... 无论你是刚入手了内置 SSD 还是便携式移动硬盘或 U 盘,都需要先将它格式化成电脑或设备能够识别的「文