重新思考 Vue 组件的定义
重新总结组件的定义
这是官方对组件的定义:组件允许我们将 UI 划分为独立的、可重用的部分,并且可以对每个部分进行单独的思考。在实际应用中,组件常常被组织成层层嵌套的树状结构。
对于 Vue 开发经验不多的我来说,起初我只是简单的把一个组件当作一个页面,也并没有把页面中太多的可以独立划分的地方写成组件。所以,我之前很多时候都是违背了 Vue 对组件的定义。
在学习了 Android 开发之后,我逐渐开始对 Vue 组件有了一些思考。Android 开发里面对视图进行了划分和定义,对于简单的 UI 界面就称之为 Views —— 视图。视图当中有许多业务,这些业务也不一定都是互相关联的,所以就划分一个 Fragment。当视图中存在列表的时候,又可以划分一个 Adapters。
因此,我在后续开发 Vue 的时候,就按照 Android 那样去划分组件。组件本身就可以是 Views,页面中确实有许多业务不存在互相关联的地方,可以再单独抽离出来作为一个组件。对于列表渲染,可以不像 Android 那样写一个 Adapters,但是列表里面也是有业务的地方,需要抽离出来作为一个组件。因此,在我的意识中,只要视图当中有业务的地方,就把它抽离成组件。
更加细化组件的好处
- 把一些业务抽离进组件中,可以避免变量声明冲突,变量命名难;
- 组件里的变量,与外边的其他组件互不干扰,可以拥有自己的空间(作用域);
- 可以把业务与其他业务进行隔离,避免与其他业务代码混淆;
- 符合 Vue 官方文档对组件的定义;
- 便于维护代码,便于与团队其他成员进行交流。
细化组件的例子
就如我现在正在开发的项目,在做评论这块时,评论是一个列表渲染,但在做回复评论、编辑评论功能时,我把业务进行了抽离(回复评论组件、编辑评论组件、删除评论组件等)。
每一个列表下的回复评论组件里面存储的编辑内容的变量是互不干扰的,所以,可以做到临时存储各自的评论内容的功能,我编辑上一个评论的内容,不会影响下一个评论的内容输入。它们互相隔开,拥有各自的作用域,也正是如此,代码写起来也非常的简单。
细化组件的总结
一个业务就抽离一个组件,虽然做起来很麻烦,但实际上在之后的工作当中非常的有益。这样做,业务之间互相被隔离开,拥有自己的作用域,在遇到变量通信问题时,可以通过 Vuex/Pinia 来解决,又或者用 Emits 来向父组件传输新数据。
重新思考 Vue 组件的定义的更多相关文章
- vue教程3-03 vue组件,定义全局、局部组件,配合模板,动态组件
vue教程3-03 vue组件,定义全局.局部组件,配合模板,动态组件 一.定义一个组件 定义一个组件: 1. 全局组件 var Aaa=Vue.extend({ template:'<h3&g ...
- Vue组件的定义、注册和调用
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>组 ...
- vue 组件的定义
1.什么是组件? 组件的出现,就是为了拆分vue实例的代码量的,能够让我们以不同的组件来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可. 2.组件化和模块化的不同? 模块化: ...
- Vue组件的定义方式
1.使用template标签定义组件 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...
- vue学习—组件的定义注册
组件的定义注册 效果: 方法一: <div id="box"> <v-header></v-header> <hr /> <b ...
- Vue.js 2.x:组件的定义和注册(详细的图文教程)
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 什么是组件 组件: 组件的出现,就是为了拆分Vue实例的代码量的, ...
- vue里在自定义的组件上定义的事件
事件分为原生事件和自定义事件. vue里在自定义的组件上定义的事件,都被认为是自定义事件,必须用$emit()来触发. 这也是子组件向父传值的原理. 如果想作为原生事件,需要在原生事件后面加上.nat ...
- Vue 数组封装和组件data定义为函数一些猜测
数组封装 var vm={ list:[0,1] } var push=vm.list.push;//把数组原来的方法存起来 vm.list.push=function(arg){//重新定义数组的 ...
- vue.2.0-自定义全局组件
App.vue <template> <div id="app"> <h3>welcome vue-loading</h3> < ...
- java+springBoot+Thymeleaf+vue分页组件的定义
导读 本篇着重介绍java开发环境下,如何写一个vue分页组件,使用到的技术点有java.springBoot.Thymeleaf等: 分页效果图 名称为vuepagerbasic的分页组件,只包含上 ...
随机推荐
- Pwn学习随笔
Pwn题做题流程 使用checksec检查ELF文件保护开启的状态 IDApro逆向分析程序漏洞(逻辑复杂的可以使用动态调试) 编写python的exp脚本进行攻击 (若攻击不成功)进行GDB动态调试 ...
- perl哈希嵌套和引用的使用
数组,哈希嵌套 数组,哈希的引用 1.哈希的嵌套和引用 %hash = ( 'group1', {'fruit', 'banana', 'drink', 'orange juice', 'vegeta ...
- TreeUtils工具类一行代码实现列表转树 实战Java8 三级菜单 三级分类 附视频
一.序言 在日常一线开发过程中,总有列表转树的需求,几乎是项目的标配,比方说做多级菜单.多级目录.多级分类等,有没有一种通用且跨项目的解决方式呢?帮助广大技术朋友给业务瘦身,提高开发效率. 本文将基于 ...
- AtCoder Regular Contest 151补题
AtCoder Regular Contest 151 A. Equal Hamming Distances 简单题,注意下答案需要字典序最小即可 #include<bits/stdc++.h& ...
- uniCloud云开发入门以及对传统开发方式的思考
事情缘由 作为选修了移动互联网应用的一员,老师讲的什么JS基础,还有ES6和uniapp,当然是没怎么听,因为是之前大二的时候都大概看过. 但是快到期末,老师讲了云开发,并且布置了与此相关的大作业,自 ...
- 2.9:数据交换-csv、Excel、json、爬虫、Tushare获取数据
〇.任务 1. 使用Python基础文件读写函数完成CSV文件的处理: 2. 使用标准CSV库完成CSV文件的处理: 3. 使用Excel库完成Excel文件的处理: 4. Python数据结构和Js ...
- 【Java SE进阶】Day05 异常,线程
一.异常 1.概念 程序执行过程中,出现非正常情况导致JVM的非正常停止 本身是一个类,产生异常即创建并抛出一个异常对象 Java处理异常的方式是进行中断处理 异常非语法错误,语法错误直接不会产生cl ...
- 爬了10000张NASA关于火星探索的图片,我发现了一个秘密
前言 最近,我使用爬虫技术,爬取了美国航空航天局,也就是你电影里经常见到的 NASA, 火星探索的相关图片,有 10000 张吧. 嗯嗯,小事情,小事情. 完事儿之后,有点小激动,于是就有了这篇文章, ...
- python基础之hashilb模块、logging模块
hashlib加密模块 1.何为加密 将文明数据处理成密文数据 让人无法看懂 2.为什么要加密 保证数据的安全,防止密码泄露 3.如何判断数据是否加密 密文数据的表现形式一般都是一串没有规则的字符串( ...
- 7、解决swagger测试接口报错:TypeError: Failed to execute ‘fetch‘ on ‘Window‘: Request with GET/HEAD method cannot have body
一.Swagger报错: 1.报错类型: TypeError: Failed to execute 'fetch' on 'Window': Request with GET/HEAD method ...