草庐IT

记录--vue组件划分的思考

林恒 2023-03-28 原文

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

对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组件的复用Vue

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

  1. ruby - Sinatra:运行 rspec 测试时记录噪音 - 2

    Sinatra新手；我正在运行一些rspec测试，但在日志中收到了一堆不需要的噪音。如何消除日志中过多的噪音？我仔细检查了环境是否设置为:test，这意味着记录器级别应设置为WARN而不是DEBUG。spec_helper:require"./app"require"sinatra"require"rspec"require"rack/test"require"database_cleaner"require"factory_girl"set:environment,:testFactoryGirl.definition_file_paths=%w{./factories./test/

  2. ruby-on-rails - Rails 5 Active Record 记录无效错误 - 2

    我有两个Rails模型，即Invoice和Invoice_details。一个Invoice_details属于Invoice，一个Invoice有多个Invoice_details。我无法使用accepts_nested_attributes_forinInvoice通过Invoice模型保存Invoice_details。我收到以下错误:(0.2ms)BEGIN(0.2ms)ROLLBACKCompleted422UnprocessableEntityin25ms(ActiveRecord:4.0ms)ActiveRecord::RecordInvalid(Validationfa

  3. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU

  4. ruby-on-rails - 事件记录 : Select max of limit - 2

    我正在尝试将以下SQL查询转换为ActiveRecord，它正在融化我的大脑。deletefromtablewhereid有什么想法吗？我想做的是限制表中的行数。所以，我想删除少于最近10个条目的所有内容。编辑:通过结合以下几个答案找到了解决方案。Temperature.where('id这给我留下了最新的10个条目。 最佳答案 从您的SQL来看，您似乎想要从表中删除前10条记录。我相信到目前为止的大多数答案都会如此。这里有两个额外的选择:基于MurifoX的版本:Table.where(:id=>Table.order(:id).

  5. Ruby 守护进程导致 ActiveRecord 记录器 IOError - 2

    我目前正在用Ruby编写一个项目，它使用ActiveRecordgem进行数据库交互，我正在尝试使用ActiveRecord::Base.logger记录所有数据库事件具有以下代码的属性ActiveRecord::Base.logger=Logger.new(File.open('logs/database.log','a'))这适用于迁移等(出于某种原因似乎需要启用日志记录，因为它在禁用时会出现NilClass错误)但是当我尝试运行包含调用ActiveRecord对象的线程守护程序的项目时脚本失败并出现以下错误/System/Library/Frameworks/Ruby.frame

  6. ruby-on-rails - 在 Rails 中更高效地查找或创建多条记录 - 2

    我有一个应用需要发送用户事件邀请。当用户邀请friend(用户)参加事件时，如果尚不存在将用户连接到该事件的新记录，则会创建该记录。我的模型由用户、事件和events_user组成。classEventdefinvite(user_id,*args)user_id.eachdo|u|e=EventsUser.find_or_create_by_event_id_and_user_id(self.id,u)e.save!endendend用法Event.first.invite([1,2,3])我不认为以上是完成我的任务的最有效方法。我设想了一种方法，例如Model.find_or_cr

  7. ruby - 在模块/类之间共享全局记录器 - 2

    在许多ruby​​类之间共享记录器实例的最佳(正确)方法是什么？现在我只是将记录器创建为全局$logger=Logger.new变量，但我觉得有更好的方法可以在不使用全局变量的情况下执行此操作。如果我有以下内容:moduleFooclassAclassBclassC...classZend在所有类之间共享记录器实例的最佳方式是什么？我是以某种方式在Foo模块中声明/创建记录器还是只是使用全局$logger没问题？ 最佳答案 在模块中添加常量:moduleFooLogger=Logger.newclassAclassBclassC..

  8. ruby - Sinatra 中的全局救援和日志记录异常 - 2

    如何在出现异常时指定全局救援，如果您将Sinatra用于API或应用程序，您将如何处理日志记录？ 最佳答案 404可以在not_found方法的帮助下处理，例如:not_founddo'Sitedoesnotexist.'end500s可以通过调用带有block的错误方法来处理，例如:errordo"Applicationerror.Plstrylater."end错误的详细信息可以通过request.env中的sinatra.error访问，如下所示:errordo'Anerroroccured:'+request.env['si

  9. ruby-on-rails - 在不重新查询数据库的情况下重新排序 Rails 中的事件记录？ - 2

    例如，假设我有一个名为Products的模型，并且在ProductsController中，我有以下代码用于product_listView以显示已排序的产品。@products=Product.order(params[:order_by])让我们想象一下，在product_listView中，用户可以使用下拉菜单按价格、评级、重量等进行排序。数据库中的产品不会经常更改。我很难理解的是，每次用户选择新的order_by过滤器时，rails是否必须查询，或者rails是否能够以某种方式缓存事件记录以在服务器端重新排序？有没有一种方法可以编写它，以便在用户排序时rails不会重新查询结果

  10. ruby-on-rails - ActiveRecord 如何将现有记录添加到 has_many :through relationship in rails? 中的关联 - 2

    在我的Rails项目中，我有三个模型:classRecipe:recipe_categorizationsaccepts_nested_attributes_for:recipe_categories,allow_destroy::trueendclassCategory:recipe_categorizationsendclassRecipeCategorization通过这个简单的has_many:through设置，我怎样才能像这样获取给定的食谱:@recipe=Recipe.first并根据现有类别向此食谱添加类别，并在相应类别上对其进行更新。所以:@category=#Exi

随机推荐