认识 Vue 的组件化思想

676 阅读3分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

1. 人处理问题的方式

  • 人面对复杂问题的处理方式:
    • 任何一个人处理信息的逻辑能力都是有限的
    • 所以,当面对一个非常复杂的问题时,我们不太可能一次性搞定一大堆内容
    • 但是,我们人有一种天生的能力,就是将问题进行拆解
    • 如果将一个复杂的问题,拆分成很多个可以处理的小问题,再将其放在整体当中,你会发现大的问题也会迎刃而解。

就是说,我们可以把搞不定的一大堆东西转换成搞得定的一堆小东西和搞得定的一个关系网

2. 认识组件化开发

  • 组件化也是类似的思想:
    • 如果我们将一个页面中所有的处理逻辑全部放在一起,处理起来就会变得非常复杂,而且不利于后续的管理以及扩展
    • 但如果我们将一个页面拆分成一个个小的功能块,每个功能块完成属于自己这部分独立的功能,那么之后整个页面的管理和维护就变得非常容易了;
    • 如果我们将一个个功能块拆分后,就可以像搭积木一样来搭建我们的项目了。

image-20211010212714108.png

3. 组件化开发

  • 现在可以说整个的大前端开发都是组件化的天下,无论从三大框架(VueReactAngular),还是跨平台方案的 Flutter,甚至是移动端都在转向组件化开发,包括小程序的开发也是采用组件化开发的思想。
  • 所以,学习组件化最重要的是它的思想,每个框架或者平台的实现方法可能不同,但是思想都是一样的。
  • 我们需要通过组件化的思想来思考整个应用程序:
    • 我们将一个完整的页面分成很多个组件
    • 每个组件都用于实现页面的一个功能块
    • 每一个组件又可以进行细分
    • 并且组件本身还可以在多个地方进行复用

4. Vue 的组件化

  • 组件化是 VueReactAngular 的核心思想,也是我们后续学习的重点(包括以后的实战项目):

    • 我们之前使用过的 createApp 函数传入了一个对象 App,其实这个对象本质上就是一个组件,也是我们应用程序的根组件
    • 组件化提供了一种抽象,让我们可以开发出一个个独立可复用的小组件来构造我们的应用;
    • 任何的应用都会被抽象成一颗组件树

    image-20211011123238159.png

下篇文章,我们就来学习一下如何在 Vue 中注册一个组件,以及之后如何使用这个注册后的组件