如何用组件化的思想来开发应用？react将组件分的很细，而Vue是否也该如此？

Question

如题。

一个组件，是应该这样：

还是这样？

1.可能支持细分组件的人并不会多。但个人认为，虽说细分会加剧信息传递成本，但是如果抛开数据传递的问题，细分组件无疑可以让视图交互结构更清晰，修改起来更方便。而数据传递的问题可以统一解决，像Vue可以用Vuex做状态管理，也可以写一个全局的静态js,方便统一调用。

2.知乎上也有人问了相关的问题，希望大家也跟他分享自己的经验。传送门>>

Answer 1

很明显这种【逻辑上功能完全内聚】的一块区域，不管是 React 还是 Vue 都可以放在同一个 UI 组件中。题主所给出的细化组件切分示意图，基本完全就是 DOM 的嵌套嘛。照这么搞，干嘛不一层 DOM 套一个组件呢？

如果看过类似的 MVVM 库代码实现就会知道，这些库的组件实现中，有很重要的一部分就是处理作用域机制，例如这样的代码：

<section v-for="item in items">
<div>{{item.title}}</div>
<div>
  {{item.desc}}
  <div>
    <div>{{item.name}}</div>
  </div>
</div>
</section>

注意这种情况下，模板所绑定的 MVVM 变量实际上不处于同一个嵌套层级中，这时按照题主的思路，就必须一层层拆分组件，然后将 item 的属性传入，只有实现得很糟糕的 MVVM 库才会强迫用户这么做，这不麻烦吗？

实际上，在 MVVM 的作用域机制下，用户是能够【穿透】DOM 的嵌套，简单地在一个 UI 组件中表达自己的模板和数据关系的。只要嵌套的 DOM 都在同一个模板变量的作用域中，那么就可以直接获取到模板变量，无需冗余而啰嗦的组件数据传递。这同样是非常符合拆分组件时的【高内聚低耦合】思想的——各种 DOM 的嵌套是为了实现同一类数据不同属性的渲染，那么为什么要拆得非常细碎呢？

所谓的【交互结构更清晰，修改起来更方便】，只要体会过目录结构展开五六层只为了拆出一个简单的按钮，或者连续往下传个三四次 props，就知道是什么体验了（你要说用 Vuex 可以解决，那我无话可说）。你会愿意复用这样【交互清晰、修改方便】的组件代码吗？

Answer 2

组件这东西，看你网站需求，很多地方用到那你就做组件，不是什么东西都细化都改成组件就一定好，有些时候不用组件反而更加方便，比如确定取消按钮，很多地方都要用到，但真的做成组件好吗。我觉得完全不必要，样式可以写公用的，但完全没必要做组件。看自己的需求吧，你看到一个网站用同一个版块的东西两三次，而且不用考虑很多种情况状态的你就可以做成组件（理论上），总之怎么方便怎么来，但千万不要坑死自己

Answer 3

我比较倾向于第一种,这样即使修改起来也方便,而第二种的情况如果组件发生修改的话就要考虑下所有应用到该组件的时候发生的修改是否符合预期了,有点过犹不及