对于Vue组件化的理解

前言一、组件化的定义和实现1. 组件的定义2. 组件的内部实现 二、组件化的优点三、总结

前言

我们可以从组件化定义、优点、使用场景和注意事项等方面展开陈述，同时要强调vue中组件化的一些特点。

一、组件化的定义和实现

用户对项目程序中具有独立逻辑、具有复用性的功能模块单独提取出来进行封装，这就是组件化的定义。组件化开发能大幅提高应用开发效率、测试性、复用性等。

1. 组件的定义

在Vue项目中，组件的定义一般有两种方式：

Vue.component()全局API Vue.component('comp', { template: '<div>this is a component</div>' }) Vue单文件的形式 <template> <div>this is a component</div> </template>

单文件形式的话，webpack的vue-loader会编译template为render函数，最终导出的依然是组件配置对象。

2. 组件的内部实现

关于Vue中对于组件化的实现，相关内容可以参考vue2源码解析(二) - 组件化原理。

在源码中对于组件化的实现，大体流程是这样的：

new Vue()进行初始化，会去注册全局API component，构建组件对应构造函数；同时，也会对Vue的options设置components选项，对应的将构造函数保存到components中。在$mount()挂载时，会将vnode转化成真实dom。其中，若vnode是组件对象，则会调用组件构造函数去创建组件并挂载。

结合我们上面关于组件的定义内容分析：

当采用Vue.component()全局API定义组件，用户在视图中使用到该组件。在页面视图进行渲染时，会调用new Vue()初始化过程中构建好的组件构造函数创建并挂载组件实例，发生在patch()中。当采用Vue单文件的形式定义组件，用户在components选项中设置了要使用的组件。在new Vue()初始化过程中，会对components选项中设置的内容生成对应的组件构造函数；在页面视图进行渲染时，会调用构建好的组件构造函数创建并挂载组件实例，发生在patch()中。

二、组件化的优点

我们知道，每个组件实例都会对应一个Watcher，当响应式数据发送变化时，内部回去调用dep.notify()通知Watcher.update()页面视图更新。

所以，在我们的程序中，若是对具有独立性逻辑、数据更新频繁的功能模块进行组件化，将来数据发生变化时，就只会对应的去调用发生数据变化的组件进行Watcher.update()视图更新，从而提高了程序的执行效率。

三、总结

组件是独立和可复用的代码组织单元。组件系统是 Vue 核心特性之一，它使开发者使用小型、独立和通常可复用的组件构建大型应用；组件化开发能大幅提高应用开发效率、测试性、复用性等；组件使用按分类有：页面组件、业务组件、通用组件；vue的组件是基于配置的，我们通常编写的组件是组件配置而非组件，框架后续会生成其构造函 数，它们基于VueComponent，扩展于Vue；vue中常见组件化技术有：属性prop，自定义事件，插槽等，它们主要用于组件通信、扩展等；合理的划分组件，有助于提升应用性能；组件应该是高内聚、低耦合的；遵循单向数据流的原则。