vue书写规范

import引入原则：
1.import {mapState} from "vuex"//涉及状态管理的优先
2.import component from "...."//components
3.import directive from "...."//directives
4.import {methods} from "...."//方法/工具/接口

 

属性及方法书写原则：

//数据相关
1.props:[],若有外部传入参数,优先书写props.排序原因:props是整个组件的数据基础,作为一个先决
条件应该被优先依赖
2.data(){} data中存放有关该组件自身内部控制状态或数据的信息.排序原因:data中的数据可以依赖
于props中的数据.
3.computed(){}// 此属性的应用场景多为props或data中的数据并非展示到页面上的最终数据,需要进
行一定的格式化或者计算，排序原因:computed属性可以依赖于props或data中的数据,并可随数据源的变化进行
同步更新.

 

//组件及外部相关
components:{},// 此属性为该组件内部对于其他组件的依赖,一般占位不多,放在尽量靠前的位置方便
增删以及修改.
directives:{},

 

//钩子函数
beforeCreated(){}
created(){},// 此函数执行的时机为props,data,computed等数据初始化完毕之后,此时vue实例并没
有挂载到dom上,所以切记,不要在此阶段进行dom操作.通常在此阶段调用接口数据.
beforeMounted(){},// vue实例挂载之前的钩子函数,较少用到,能在此阶段调用的通常可在created阶
段执行
mounted(){},// vue实例挂载到dom上,在此阶段可以使用$el,$refs等获取dom元素.尽量避免使用选择
器来对dom进行操作.(作为数据驱动的框架,原则上能不动dom就不动,除非在不得不动的情况下再考虑
操作dom).
beforeUpdate(){},// 数据更新之前调用,也就是每次数据更新都会执行该函数,其调用时机的高频性
注定其使用的低频性.所以,项目中几乎不会用到.
update(){},// 数据更新之后调用,使用情况同上

beforeDestroyed(){},
destroyed(){},

 

// 其他属性和方法
watch:{}// 当我们需要根据一个数据的变化来实现其他部分的同步更改的情况下,会使用的此属性,检测其变化,并根据变化值来确定视图或者数据的最终形态.
methods:{}// 所有涉及到方法/操作/触发等动作的,无论同步还是异步,都应在此处体现出来,以保证其可追溯性.是构成整个组件的逻辑操作的主体,通常所占篇幅较大,建议放在最后,以避免将其他属性和方法挤到最后不方便查看,且其更似一个功能独立的单块.

 

转载于:https://www.cnblogs.com/zJintao/p/8566490.html