Open LastPoem opened 5 years ago
Vue组件化是为了实现代码复用，一个组件实际上就是一个模块。但是组件和模块是有区别的，组件中可能包含模块，模块中也可能包含组件。组件也是页面和功能的复合体。比如一个输入框组件，一个返回顶部组件，都是UI和业务逻辑的组合。当某个功能模块重复使用次数较多时，就可以把其中共有部分抽象出来做成组件，这和面向对象中的抽象一个概念。当共有部分抽象出来后再次使用的时候只需要关注差异化的事物，而不用再次从头写共有部分。
实现组件化，关键是对于整体怎么拆分。 为了实现独立特性，组件需要考虑的是解耦。所以一般组件只会和它的父组件进行通信，这时就会用props和emit/on来实现父子通信。而子组件间的通信尽量通过父组件调度。 并且在组件化时一个原则就是从上到下传递状态（即数据），从下到上传递事件。 为了实现可复用，在封装组件时要考虑到组件所有的应用场景，让组件可应用的范围更大。这就要考虑从上到下需要传递哪些状态，子组件哪些属性是父组件可以定制的，以应对不同应用场景。
什么是组件化
为什么要组件化
Vue组件化原则
总结
Vue组件化是为了实现代码复用，一个组件实际上就是一个模块。但是组件和模块是有区别的，组件中可能包含模块，模块中也可能包含组件。组件也是页面和功能的复合体。比如一个输入框组件，一个返回顶部组件，都是UI和业务逻辑的组合。当某个功能模块重复使用次数较多时，就可以把其中共有部分抽象出来做成组件，这和面向对象中的抽象一个概念。当共有部分抽象出来后再次使用的时候只需要关注差异化的事物，而不用再次从头写共有部分。
实现组件化，关键是对于整体怎么拆分。 为了实现独立特性，组件需要考虑的是解耦。所以一般组件只会和它的父组件进行通信，这时就会用props和emit/on来实现父子通信。而子组件间的通信尽量通过父组件调度。 并且在组件化时一个原则就是从上到下传递状态（即数据），从下到上传递事件。 为了实现可复用，在封装组件时要考虑到组件所有的应用场景，让组件可应用的范围更大。这就要考虑从上到下需要传递哪些状态，子组件哪些属性是父组件可以定制的，以应对不同应用场景。