[Vue]组件编写小结

前言

随着js编程进入工程化纪元，代码模块化，组件化，成为工程的具体落地方法。

最近使用vue全家桶做了一个类似于iconfont的网站，在做的过程中关于组件有了一些思考和总结，为了巩固，写个小结。

一 组件类型

根据我已知的组件的编写方式，有四种介绍给大家：

1.1 基本组件

最基本的组件由一个.vue文件构成，其中包含了基本的tempplate，script, style三大元素。

可以通过props接收参数，$emit事件bus向父传递参数。

比较懒得我一般会在dev阶段在components文件夹里放置一个Demo.vue。写好基本的元素以及组件注释。

import后在组件的compontents中声明就可以在模板里 标签调用 了。

这里比较注意的是组件命名规范应该严格参考vue风格指南。让驼峰和短横线在该使用的地方使用。

1.2 构建组件

构建类组件主要是用在想要通过 js动态调用组件 的场景里，由一个该组件文件夹比如notice，中包含Notice.vue, index.js两个文件组成。

vue文件就是编写基本的vue文件

index.js中

• 使用vue的extend方法来返回一个Notice.vue的构造器对象，在对象原型上添加一些常用方法比如close
• 编写Notice函数对象，在函数中将构造器对象进行实例化（最基本的：创造一个div元素给el属性）
• 将该实例的el属性append到body（或者你想要的添加的元素）中
• 将函数传来的参数数据处理后对实例中数据进行赋值（等于props传值）
• 将这个函数对象作为default返回

调用：

• 可以通过在main.js中调用然后将其挂载在Vue原型上再去组件this中调用方式调用
• 也可以在不同组件中引入然后再去调用

1.3 全局组件

全局组件主要是用在一些通用组件想要在各处组件里使用标签调用的场景，组成与构建组件相同。

vue文件就是编写基本的vue文件（该注意的点还是多注意下，全局对通用，颗粒的要求更高一些

index.js中

• 引入组件ButtonComponent并且编写一个组件对象用于导出，该组件对象中有一个install方法
• install方法中核心：Vue.component("Button", ButtonComponent);
• 返回该组件对象

在全局中引入组件对象使用Vue.use()注册该组件

在各个组件中通过标签直接调用

1.4 指令类组件

指令类主要是使用Vue.directive方法注册一个指令，在指令中bind的方法中去实例组件并添加到响应dom处。这里不多说，因为我没用到。

其结构类似于全局组件，只是调用是通过在某个元素上的指令属性进行调用。

二 组件设计原则

好了，知道怎么写一个基本的组件了，路程刚刚开始，那么如何写好一个组件呢。如果你写的组件是为了目的而写不考虑设计原则，相信很快就会被你自己所抛弃，然后重构组件。

先说下我的组件设计思路：

1. 思考组件类型：是基础组件，还是业务组件
2. 思考组件核心：该组件核心是什么，核心代表着极低的变动，甚至不变
3. 思考组件颗粒度（复用性）： 该组件是基础组件会被多处复用 ？设计时尽量最小化，减少ui数据绑定使其灵活轻巧 : 业务组件则可以适当ui和数据绑定，只通过一部分传参进行update
4. 思考组件插槽：插槽的存放位置，后备内容，数据等
5. 思考组件数据传递（可配置性）： 是否需要数据传递 ？是否会深层传参 ？采用vuex ：注意props数据不要被组件内直接改变，$emit向上传递数据 ：无数据传递，仅作为ui层复用
6. 思考组件数据健康（内存管理，watcher下尽量扁平数据存放，动态请求刷新）
7. 思考组件性能（优化，提取）

三 复杂组件设计

---------------------------------------困死了，先睡为敬...-------------------------------------

参考

Vue组件实现tips的总结

[译] 前端组件设计原则

前端工程化、模块化、组件化见解

Vue组件的三种调用方式

vue 组件的三种使用方式教程