Vue 组件设计原则

以你之姓@ 2022-12-11 09:16 4阅读 0赞

#### 1.扁平的，面向数据的 state/props ####

扁平 props 也可以很好地清除组件正在使用的数据值。如果你传给组件一个对象但是你并不能清楚的知道对象内部的属性值，所以找出实际需要的数据值是来自组件具体的属性值则是额外的工作。  
state / props 还应该只包含组件渲染所需的数据。  
（此外，对于数据繁重的应用程序，数据规范化可以带来巨大的好处，除了扁平化之外，你可能还需要考虑一些别的优化方法）。

#### 2.更加纯粹的 State 变化 ####

对 state 的更改通常应该响应某种事件，例如用户单击按钮或 API 的响应。此外它们不应该因为别的 state 的变化而做出响应，因为 state 之间这种关联可能会导致难以理解和维护的组件行为。state 变化应该没有副作用。

#### 3.松耦合 ####

组件的核心思想是它们是可复用的,为此要求它们必须具有功能性和完整性。

“耦合”是指实体彼此依赖的术语。

松散耦合的实体应该能够独立运行，而不依赖于其他模块。

就前端组件而言，耦合的主要部分是组件的功能依赖于其父级及其传递的 props 的多少，以及内部使用的子组件（当然还有引用的部分，如第三方模块或用户脚本）。

如果不是要设计需要服务于特定的一次性场景的组件，那么设计组件的最终目标是让它与父组件松散耦合，呈现更好的复用性，而不是受限于特定的上下文环境

#### 4.辅助代码分离 ####

一个有效的原则就是将辅助代码分离出来放在特定的地方，这样你在处理组件时就不必考虑这些。例如：

*  配置代码
 *  假数据

#### 5.及时模块化 ####

我们在实际进行组件抽离工作的时候，需要考虑到不要过度的组件化  
在决定是否将代码分开时，无论是 Javascript 逻辑还是抽离为新的组件，都需要考虑以下几点：

*  是否有足够的页面结构/逻辑来保证它？
 *  代码重复（或可能重复）？
 *  它会减少需要书写的模板吗？
 *  性能会收到影响吗？
 *  是否会在测试代码的所有部分时遇到问题？
 *  是否有一个明确的理由？
 *  这些好处是否超过了成本？

#### 6.集中统一的状态管理 ####

许多大型应用程序使用 Redux 或 Vuex 等状态管理工具（或者具有类似 React 中的 Context API 状态共享设置）。这意味着他们从 store 获得 props 而不是通过父级传递。在考虑组件的可重用性时，你不仅要考虑直接的父级中传递而来的 props，还要考虑 从 store 中获取到的 props。

由于将组件挂接到 store（或上下文）很容易并且无论组件的层次结构位置如何都可以完成，因此很容易在 store 和 web 应用的组件之间快速创建大量紧密耦合（不关心组件所处的层级）

发表评论取消回复

表情：

评论列表（有 0 条评论，4人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue 组件设计原则

1.扁平的，面向数据的 state/props 扁平 props 也可以很好地清除组件正在使用的数据值。如果你传给组件一个对象但是你并不能清楚的知道对象内部的属性值，所以

以你之姓@/ 2022年12月11日 09:16/ 0 赞/ 5 阅读

相关 Vue 组件

首先，我们还是先创建一个vue实例，很熟练了，没难度。 <div id="app"></div> <script> let vm =

落日映苍穹つ/ 2022年05月29日 09:26/ 0 赞/ 357 阅读

相关 vue组件

全局组件  Vue.component('todo-list',{ template:"<li>{

左手的ㄟ右手/ 2022年05月13日 23:23/ 0 赞/ 341 阅读

相关 vue组件

定义全局组件的三种方式方式1,伪代码 <div id="app"> <-- 引用组件,是引号里的名词，不是实例对象--> <m

落日映苍穹つ/ 2022年04月23日 15:38/ 0 赞/ 373 阅读

相关 VUE组件

介绍几种VUE组件定义方法定义VUE 字符串组件 Vue.component('order-item', { //定义VUE组件的属

ゞ浴缸里的玫瑰/ 2022年03月26日 13:10/ 0 赞/ 361 阅读

相关 VUE组件

VUE Component 一、概述 1. 作用扩展HTML元素，封装可重用的代码。在需要使用的地方引用组件。二、VUE前情回顾使用： 1.

雨点打透心脏的1/2处/ 2022年01月29日 06:19/ 0 赞/ 351 阅读

相关 vue组件

组件(Component)是Vue.js最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。所有的 Vue 组件同时也都是 Vue 的实例，所以可接受相同的选项对

系统管理员/ 2022年01月28日 08:43/ 0 赞/ 412 阅读

相关 vue组件

定义Vue组件什么是组件：组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件

本是古典何须时尚/ 2022年01月05日 07:25/ 0 赞/ 401 阅读

相关 Vue组件

为什么使用组件 JavaScript能力的复用。Vue.js的组件提高重复性，让代码可以复用。组件的用法组件在使用前先需要注册。注册分为两种方式：全局注册和局

叁歲伎倆/ 2021年09月27日 13:56/ 0 赞/ 447 阅读

相关 Vue组件

Vue组件 1. 什么是组件 1. 组件的概念：组件即自定义控件，是Vue.js最强大的功能之一 2. 组件的用途：组件能够封装可重用代码，扩展html标签功能

ゝ一世哀愁。/ 2021年07月24日 23:50/ 0 赞/ 636 阅读