VUE组件开发规范

“

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

”

01

书写原则

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

02

规范

一

组件是什么

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

二

组件需要依赖什么

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

三

组件需要什么数据

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

四

组件内部有什么数据

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

五

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

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

六

组件内部有什么API可调用

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

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

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

来源：腾讯内部KM论坛

  -前端好课-  

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

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

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

也可直接查找微信号：TencentNext

▲ NEXT学院 官方课程助教 ▲

点击阅读原文，0元学习