VUE组件开发规范

“

Vue组件提供了丰富多样的配置可供开发者使用，不同的配置项书写顺序并不影响实际运行效果，但这缺给后期维护带来了一定的困扰，因此在蓝鲸产品中心我们规范了配置项的书写顺序。

”

书写原则

组件是什么组件需要依赖什么组件需要什么数据组件内部有什么数据组件在各生命周期做了什么组件有什么API可调用

规范

一

组件是什么

首先应该告诉开发者该组件是什么，因此我们要求将name写在组件的最前方。

二

组件需要依赖什么

开发维护一个组件时，通常组件内部还依赖了其他的组件，类似js中需要将依赖import写在最上方，因此我们要求components属性紧邻name属性。

三

组件需要什么数据

一个组件作为子组件与父组件通信时，父组件的数据需要通过props属性向下传递，其他诸如directives mixins等依赖依次在后。

四

组件内部有什么数据

除去父组件提供的数据外，我们组件内部也需要维护自己的数据data，同时基于自己的数据还有计算属性computed依赖data，侦查器watch对于props data computed均能监听。

五

组件在各生命周期做了什么

外部依赖，内部状态都声明后，我们需要知道组件在哪些生命周期做了什么事，因此接下来是生命周期钩子函数的调用。

六

组件内部有什么API可调用

最后，组件内部有什么API可调用，即methods。

至此，我们的规范已经形成，其他未列入的属性配置项，按照以上原则在合适的位置书写即可。

原文作者：腾讯高级工程师朱雷

来源：腾讯内部KM论坛

-前端好课-

最热前端框架，晋升加薪必修技能

多项目迭代式教学，低门槛快速进阶高级工程师

若需了解更多，请扫码添加小助手咨询~

也可直接查找微信号：TencentNext

▲ NEXT学院官方课程助教 ▲

点击阅读原文，0元学习