这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

对vue项目来说,组件是构成项目的基本单元,为了方便理解,这里定义两类组件:页面组件,功能组件。
为什么需要划分这两类组件是从组件复用来考虑的。

我们知道在复杂应用中,页面状态管理早已不是早期的简单的子父组件的传值,兄弟组件传值。而当我们寻求到vuex这种状态管理来处理组件间状态管理的时候,我们同样也对使用vuex的组件失去了复用的可能。

为什么失去了复用的可能?
我们知道是用第三方状态管理就意味着状态丢给了第三方,而我们的组件依赖第三方状态管理的时候,单个组件就不足以仅把组件复用,还必须根据该组件对于的状态进行第三方状态管理的配置。同时我们可能还要对各种状态是做什么的了如指掌,这和写一个该组件的成本没什么差别(可能比写一份该组件的成本更高)。

所以,对于该类使用或者可能使用第三方库的组件划分为页面组件,而剩下的和第三方库无依赖关系的组件划分为功能组件。
从而我们可以理解为,页面组件是无法复用的组件,功能组件是可以复用的组件。

如何定义他们

最先对页面组件的定义仅仅是整张页面的统筹,页面组件也是由一个个功能组件堆叠而成的,比如element-ui这样的组件库,他们的组件都可以称之为功能组件。而我们所写的页面,引入了element-ui中的各种组件堆出了一张管理系统的页面,就是页面组件。我们通常会在页面组件中发送数据请求,根据接口返回数据,处理为可用数据,然后将数据分发给不同功能组件。同样,页面组件也会接受功能组件返回值,根据返回值做不同的处理(或请求数据,或修改数据)

而对功能组件的定义为,他的展示只受父组件通过props组件传值过来的数据影响,他的所有状态均为内部私有,与外部组件的交互有vue提供的props以及事件分发vm.$emit()。因为只有这也组件才能保证其完整的内部状态,在复用时不受其他因素的影响。

如何划分他们

划分页面组件最简单的方式是由路由划分,每一个路由对应一个页面组件。
功能组件的划分需要对页面组件的功能进行分析分类。功能组件的划分可能根据不同人的理解各不相同,但是原则只有一个:

功能组件应该类似面向对象编程一样,一个功能组件应该只是完成一个功能。

拿当你看见这篇博文时页面的布局来举个例子:

页面组件就是当前你看见的这个网页地址的完整显示,他将包含几个功能组件

功能组件可能有以下几个:
1. 文章组件,可能需要的props的值为:标题,时间,内容 (文章内容显示)
2. 个人信息组件:可能需要的props的值为:头像等个人信息 (个人信息显示)
3. 列表组件:可能需要的props的值为:列表名,列表list (右下角的最新文章,文章存档,热门文章等显示)
4. 评论组件: 可能需要的props的值为:头像,名称,时间,内容。
5. 按钮组件: 页面中的各种按钮,比如左边的点赞分享按钮,可能需要的props为两张小图片,一张正常显示,一张移入显示

在谈谈自己对页面组件的理解

自己对页面组件的理解仅仅是各种功能组件的整合,就和我们写以前项目中使用js调用各种库一样,通过这些库写出了各种效果。我们可能通过jquery的ajax发送一个请求,请求回来一个分也数据,我们把分页数据处理,把数据条数传给了一个分页插件,然后分页插件帮我们渲染出了分页器。我们可能把请求回来的列表内容传递给了一个自己封装的表格渲染插件,表格渲染插件帮我们渲染出了我们想要的表格数据并且显示在了页面上面。而页面组件就担任这这个js所做的功能,请求数据,分发数据,接受插件的回调,在请求数据,在分发数据
而页面组件也是一样,请求处理数据,分发数据给对应组件的props,接受某些组件的vm.$emit()传回来的值,在请求处理数据,修改组件的props的值进行传递

由上面一系列类比,其实组件就好比或者说就是插件,或者面向对象的写法。思想上面对组件的划分就和对功能的封装。组件留的props就是对接口的定义。本质上没区别的。

本文转载于:

https://blog.csdn.net/stopllL/article/details/79473357

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

记录--vue组件划分的思考的更多相关文章

  1. Vue组件使用基础

    这篇博文用来记录 .vue 组件的使用方法. 可以把组件代码按照 template.style.script 的拆分方式,放置到对应的 .vue 文件中. 模板(template).初始数据(data ...

  2. 重新思考 Vue 组件的定义

    重新总结组件的定义 这是官方对组件的定义:组件允许我们将 UI 划分为独立的.可重用的部分,并且可以对每个部分进行单独的思考.在实际应用中,组件常常被组织成层层嵌套的树状结构. 对于 Vue 开发经验 ...

  3. vue 组件发布记录

    好久没做独立的 vue 组件了,最近突然想把一个常用的 vue 组件打成一个 npm 包,方便使用.好久不用,发现已经忘记环境怎么搭建.翻看以前的组件,才慢慢回想起来,中间还出现些错误.在这记录下开发 ...

  4. 4.VUE前端框架学习记录四:Vue组件化编码2

    VUE前端框架学习记录四:Vue组件化编码2文字信息没办法描述清楚,主要看编码Demo里面,有附带完整的代码下载地址,有需要的同学到脑图里面自取.脑图地址http://naotu.baidu.com/ ...

  5. 3.VUE前端框架学习记录三:Vue组件化编码1

    VUE前端框架学习记录三:Vue组件化编码1文字信息没办法描述清楚,主要看编码Demo里面,有附带完整的代码下载地址,有需要的同学到脑图里面自取.脑图地址http://naotu.baidu.com/ ...

  6. vue学习记录⑤(组件通信-父与子)

    今天我们看一下组件通信. 经过前面几篇文章,我们已经可以构建出完整的单个组件,并利用路由使其串联起来访问了. 但这明显还是不够的.一个页面不可能就是个单组件,一般是由多个组件合成的.正因为如此,组件之 ...

  7. vue组件库(一):前期准备工作

    前言 将近期项目内自行开发一个vue组件,做个总结,记录下自己的思维过程~~~ 正文 接到这个任务后,还是要做些准备工作的. 主要内容如下: 1.优化下所在团队前端开发流程 服务器搭建gitlab,采 ...

  8. Vue 组件设计

    Vue 组件设计 Vue 作为 MVVM 框架一员,不管是写业务还是基础服务,都少不了书写组件.本文总结一下书写业务组件的一些心得. 为什么要写组件? 我们知道,只要是组件,就需要在引用的时候与 vi ...

  9. vue组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了一下的内容.首先会对使用Vue进行开发的一些前期需要的技术储备进行简单 ...

  10. Vue.js 学习笔记之四:Vue 组件基础

    到目前为止,这个系列的笔记所展示的都是一些极为简单的单页面 Web 应用程序,并且页面上通常只有几个简单的交互元素.但在实际生产环境中,Web 应用程序的用户界面往往是由多个复杂的页面共同组成的.这时 ...

随机推荐

  1. JS Leetcode 278. 第一个错误的版本 题解分析

    壹 ❀ 引 本题来自LeetCode的278. 第一个错误的版本,难度简单,端午节就应该做点容易的题目缓解心情,题目描述如下: 你是产品经理,目前正在带领一个团队开发新的产品.不幸的是,你的产品的最新 ...

  2. YOLOV3目标检测模型训练实例

    YOLOV3目标检测 从零开始学习使用keras-yolov3进行图片的目标检测,比较详细地记录了准备以及训练过程,提供一个信号灯的目标检测模型训练实例,并提供相关代码与训练集. DEMO测试 YOL ...

  3. Swoole从入门到入土(14)——HTTP服务器[协程风格]

    在这之间,我们讨论了异步风格HTTP服务器,它继承自异步风格的TCP服务器,有着异步风格的所有优点,同时如果碰到了大量的IO等待也会存在阻塞的缺点. 而协程风格的HTTP则很好处理了IO等待的问题.这 ...

  4. KQL笔记

    KQL: {'query': {'bool': {'must': [{'match': {'Sql': 'insert'}}, {'match': {'PolicyName.keyword': 'd8 ...

  5. C# EnumWindows示例代码

    代码开箱即用,唯一需要处理的就是要提供一个进程的pid. using System; using System.Collections.Generic; using System.Linq; usin ...

  6. 使用3-hexo主题时无法正常渲染html代码

    问题描述 在hexo框架中使用3-hexo主题时,会遇到这样一个问题:在markdown中嵌入html代码,这些嵌入的html代码无法正常显示. 原因分析 在使用3-hexo主题时,默认使用主题自带的 ...

  7. 如何避免Git合并远程分支时出现可读性差的日志

    问题及现象 当某一分支(假设为main)的本地仓库和远程仓库都基于同一个提交进行了修改,并分别创建了新的提交时,在本地执行git push origin main会提示先要执行git pull合并远程 ...

  8. unrar命令

    解压提取RAR压缩文件 语法格式:unrar 参数 压缩包 常用参数 e 将文件解压缩到当前目录 o - 不要覆盖现有文件 l 显示文件列表 p 设置压缩包密码 p 将文件显示到标准输出 r 递归处理 ...

  9. Elasticsearch系列之-windows安装和基础操作

    ElasticSearch安装 安装JDK环境 因为ElasticSearch是用Java语言编写的,所以必须安装JDK的环境,并且是JDK 1.8以上 官网:https://www.oracle.c ...

  10. SSH不对称密钥自动登入服务器

    SSH不对称密钥自动登入服务器 1.先在自己的电脑上创建密钥对 ssh-keygen -t rsa Windows下生成SSH密钥 $ ssh-keygen -t rsa -C "youre ...