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

2023-12-10 09:38

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

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

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



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

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

如何选择适合孤独症兄妹的学校?

在探索适合孤独症儿童教育的道路上,每一位家长都面临着前所未有的挑战与抉择。当这份责任落在拥有孤独症兄妹的家庭肩上时,选择一所能够同时满足两个孩子特殊需求的学校,更显得尤为关键。本文将探讨如何为这样的家庭做出明智的选择,并介绍星贝育园自闭症儿童寄宿制学校作为一个值得考虑的选项。 理解孤独症儿童的独特性 孤独症,这一复杂的神经发育障碍,影响着儿童的社交互动、沟通能力以及行为模式。对于拥有孤独症兄

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

如何在页面调用utility bar并传递参数至lwc组件

1.在app的utility item中添加lwc组件: 2.调用utility bar api的方式有两种: 方法一,通过lwc调用: import {LightningElement,api ,wire } from 'lwc';import { publish, MessageContext } from 'lightning/messageService';import Ca

C#实战|大乐透选号器[6]:实现实时显示已选择的红蓝球数量

哈喽,你好啊,我是雷工。 关于大乐透选号器在前面已经记录了5篇笔记,这是第6篇; 接下来实现实时显示当前选中红球数量,蓝球数量; 以下为练习笔记。 01 效果演示 当选择和取消选择红球或蓝球时,在对应的位置显示实时已选择的红球、蓝球的数量; 02 标签名称 分别设置Label标签名称为:lblRedCount、lblBlueCount

透彻!驯服大型语言模型(LLMs)的五种方法,及具体方法选择思路

引言 随着时间的发展,大型语言模型不再停留在演示阶段而是逐步面向生产系统的应用,随着人们期望的不断增加,目标也发生了巨大的变化。在短短的几个月的时间里,人们对大模型的认识已经从对其zero-shot能力感到惊讶,转变为考虑改进模型质量、提高模型可用性。 「大语言模型(LLMs)其实就是利用高容量的模型架构(例如Transformer)对海量的、多种多样的数据分布进行建模得到,它包含了大量的先验

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能