Vue 项目开发规范_总结

Aweiweier192_
156 阅读4分钟

Vue 规范指南

本片小文主要总结下，在 Vue开发中的一些规范和优化，以减少初次开发项目的开发人员在编写代码中出现的一些疑虑，并提供一些优化方案；当然本文主要是个人的一些总结和借鉴，有不同意见的读者欢迎留言评论。

规范分类

  • *****：五星，必须遵守
  • ****：四星，提高可读性和开发体验
  • ***：三星，在多个解决方案中提供最优选

*****

组件的 data 必须是一个函数

当在任何一个组件中使用到 data 时( new Vue 除外)，其返回值必须是一个对象。

说明:

当 data 只是一个对象时，其所在的组件会在所有的实例之间数据共享，而不是各自的组件实例拥有各自的状态；为达到当前的要求，就需要每个实例生成各自的数据，所以通过调用函数返回对象就可以解决此问题。

export default {
	// ...
	data () {
		return {
    		// ...
                }
	}
}

// 在main.js文件中 new Vue 是根实例，可以直接使用对象
new Vue({
    data: {
    	// ...
    }
})

Props 的使用

在项目开发时，prop的声明应尽量详细

  • 在开发环境下，当提供数据格式错误，Vue会发出警告，利于捕获错误来源
  • 易读性更强

  1. type（数据类型）：String、Number、Boolean、Array、Object、Date、Function、Symbol

  2. required：必要的

  3. default：默认值

  4. validator：验证数据的函数

props: {
    name: String,
    name: {
    	type: String,
        required: true
    },
    name: {
    	type: String,
        default: 'lv'
    },
    name: {
    	type: String,
        validator: function (value) {
        	// value 必须匹配下列字符串中的一个
        	return ['joy', 'anger', 'sadness'].indexOf(value) !== -1
        }
    },
	obj: {
    	type: Object,
        required: true
    },
    Obj: {
    	type: Object,
        // Object、Array 的类型的默认值必须从一个工厂函数获取
        default: funtion () {
        	return {
            	msg: 'vue prop',
                status: 0,
                // ...
            }
        }
    }
}

v-for 设置 key 值

在组件上必须总是使用 key 来配合 v-for 使用

<ul>
	<li
    	v-for="item in todos"
        :key='item.id'
    >
    	{{ item.txt }}
    </li>
</ul>

data () {
	return {
    	todos: [
        	{
            	id: 'yhg',
                txt: 'asdvlkanlv'
            },
            {
            	id: 'arg',
                txt: 'zdnfn'
            },
            // ...
        ]
    }
}

v-if 和 v-for 永不同船

永远不要将 v-if 和 v-for 同时作用在同一个元素上

  • 如出现一下情况，应先将原数据进行处理后，再到页面上使用
<li v-for="item in users" v-if="item.isActive">
{{item.name}}
</li>

// -----------------------------------------------
// 推荐
<ul>
	<li v-for="item in activeUsers" :key="item.id">
		{{item.name}}
	</li>
</ul>

data () {
	return {
    	users: [
            {
            	id: '789',
            	name: 'vue',
                isActive: true
            },
            {
            	id: '456',
            	name: 'lv',
                isActive: true
            },
         	{
            	id: '123',
            	name: 'an',
                isActive: false
            }
        ]
    }
}

computed: {
    activeUsers () {
    	return this.users.filter(item => {
           return item.isActive === true
        )
    }
}

组件的 CSS样式设置作用域

在实际项目开发中，对于 App组件、布局组件和全局组件等的样式可以是全局的，其它组件都应该有自己的 scoped（作用域）；并且在设置样式时，都使用 class的方式，而不仅仅是依靠 scoped（作用域）

<template>
	<input class='search-input search-txt' />
</template>

<!-- 使用 scoped -->
<style scoped>
.search-input {
	border-radius: 4px;
}
.sezrch-txt {
	color: blue;
}
</style>
<!-- ****************************** -->
<template>
	<input :class="[$style['search-input'], $style['search-txt']]" />
</template>

<!-- 使用 CSS Modules -->
<style module>
.search-input {
	border-radius: 4px;
}
.sezrch-txt {
	color: blue;
}
</style>

自定义标签名不能是单个单词

自定义标签名应始终是多个单词，这样做可以避免与现有的及未来的 HTML元素相冲突，因为所有的 HTML元素的名称都是单个单词

Vue.component('base-btn', {
	// ...
})
export default {
	name: 'BaseBtn',
    // ...
}

<!-- ********************* -->

<template>
	<base-btn></base-btn>
</template>

****

组件命名规则

组价的命名最好做到见名知意，并且要区分好大小写，当混用文件名时可能会导致大小写不敏感的文件系统出问题，或者直接使用横线连接命名方式

  • 见名知意

  • 组件名称规则

    1. 始终保持单词大写开头 (PascalCase)
    2. 始终保持横线连接 (kebab-case)
components/
 |- MyComponent.vue

<!-- ******************** ->

components/
 |- my-compoment.vue

模板中组件名的大小写

对于实际项目的开发规范来说，在单文件组件和字符串模板中组件名应该总是 PascalCase 的；但在 DOM 模板中应总是 kebab-case 的。

  • HTML 对于大小写是不敏感的，在 DOM模板中必须使用 kebab-case 命名
  • kebab-case 命名，在视觉上更能和单个单词的 HTML元素区分开来
<template>
	<!-- 在所有地方都适用 -->
	<my-compoment></my-compoment>
</template>

JS/JSX 中组件名大小写

JS/JSX 中的组件名应该始终是 PascalCase 的，尽管在较为简单的应用中只使用 Vue.component 进行全局组件注册时，可以使用 kebab-case 字符串

Vue.component("MyComponent", { // ... })

Vue.component("my-component", { // ... })

import MyComponent from './MyComponent.vue'
export default {
	name: 'MyComponent',
    // ...
}

Prop 命名大小写

在声明 prop时，其命名应始终使用 camelCase，而在模板和 JSX中应该始终使用 kebab-case

<my-component is-load='true'></my-component>

props: {
	isLoad: Boolean
}
avatar
文章
阅读
粉丝