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

问题描述

问 题

如题。

一个组件，是应该这样：

还是这样？

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

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

这个问题已被关闭，原因：偏离社区主题，与技术无关、讨论类、对他人无用

解决方案

很明显这种【逻辑上功能完全内聚】的一块区域，不管是 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 可以解决，那我无话可说）。你会愿意复用这样【交互清晰、修改方便】的组件代码吗？

这篇关于vue.js - 如何用组件化的思想来开发应用？react将组件分的很细，而Vue是否也该如此？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！