浅谈Vue组件开发几个原则

江湖传闻

随着互联网技术的发展，HTML从最初静态网页，发展到现在各端丰富多彩的应用。当初的江湖霸主jQuery，现在已经偏安一隅。angularJS手持MVC利剑，用其庞大的身躯，在前端江湖那平静的湖面砸出一股巨浪。随后React利用家族优势，扛着MVVM宝剑，也在前端江湖掀起了血雨腥风。之后Vue偷师学艺并融合ES5前辈的绝学，利用MVVM宝剑的优势，很快也打下了一片天地。

Vue与Angular 、React的对比

Vue与Angular

• Vue与angularjs
  相同点：

  1. 支持指令且支持自定义指令；
  2. 支持过滤器且支持自定义过滤；
  3. 双向数据绑定

  不同点

  1. angularjs是基于MVC的设计模式，而Vue是基于MVVM的设计模式；
  2. angularjs支持依赖注入，而Vue不支持；
  3. 数据响应式原理，angularjs是根据脏数据检查更新数据的，而Vue数据劫持结合发布者-订阅者模式的方式来实现的

• Vue与Angular
  相同点：

  1. 组件化
  2. 支持指令
  3. 支持过滤器
  4. 双向数据绑定

  不同点

  1. Angular仅支持typeScript,而Vue支持JS和TS；
  2. Angular支持依赖注入，而Vue不支持；
  3. 数据响应式原理，angularjs是根据脏数据检查更新数据的，而Vue数据劫持结合发布者-订阅者模式的方式来实现的

Vue与React

相同点

1. 支持组件化开发
2. 虚拟dom
3. 双向数据绑定

不同点

1. React函数式编程，而Vue是结合html/css/Js的编程；
2. Diff算法不同：Vue是通过Object.defineProperty函数劫持数据来检测数据变化，更加细粒度的去更新状态有变化的组件；React通过setState方法更新数据，当调用该方法时，会更新组件及其子组件。

Vue优势

Vue是渐进式框架，上手容易，深受中小企业喜爱。

Vue组件开发设计原则

1. 受组件外部影响的使用props属性

组件的展示受外部因素影响，如接口数据展示，按钮样式区别等，请使用props属性

3. 组件既受内部影响又受外部影响，请使用事件

组件的控制，既受外部影响又受内部变化影响，如：Dialog组件，Modal组件等，既要从外面能控制它的显隐，又可以从内部关闭它。

5. 不确定组件样式多使用插槽

很多时候，开发组件时，并不知道组件要展示成什么样的。如Table组件，内容可以占多行，也可以占据多列。如果每种情况多考虑的化，基本没法实现。再如，输入域组件，输入框前后都有可能展示其他东西，这时必须考虑使用插槽。

7. 组件复用性

组件最好是单一职能，一个组件如果有太多的职能，一是开发时处理逻辑容易混乱，二是复用性差。这种情况，可以拆分成多个组件，然后组合成一个大组件。