组件化定义、优点、使用场景和注意事项等方面展开陈述,同时要强调vue中组件化的一些特点。
- 源码分析1:组件定义
// 组件定义
Vue.component('comp', {
template: '<div>this is a component</div>'
})
组件定义,src\core\global-api\assets.js
<template>
<div>
this is a component
</div>
</template>
vue-loader会编译template为render函数,最终导出的依然是组件配置对象
-
源码分析2:组件化优点
lifecycle.js - mountComponent()
组件、Watcher、渲染函数和更新函数之间的关系 -
源码分析3:组件化实现
构造函数,src\core\global-api\extend.js
实例化及挂载,src\core\vdom\patch.js - createElm()
总结
- 组件是独立和可复用的代码组织单元。组件系统是 Vue 核心特性之一,它使开发者使用小型、独立和通常可复用的组件构建大型应用;
- 组件化开发能大幅提高应用开发效率、测试性、复用性等;
- 组件使用按分类有 :页面组件、业务组件、通用组件;
- vue的组件是基于配置的,我们通常编写的组件是组件配置而非组件,框架后续会生成其构造函数,它们基于VueComponent,扩展于Vue;
- vue中常见组件化技术有: 属性prop,自定义事件,插槽等,它们主要用于组件通信、扩展等;
- 合理的划分组件,有助于提升应用性能;
- 组件应该是高内聚、低耦合的;
- 遵循单向数据流的原则。
网友评论