vue 风格指南解析
2020/4/27 14:33:36
本文主要是介绍vue 风格指南解析,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
Vue 有个官方的风格指南,我从中摘抄了些认为比较重要、自己常忽略的点,加上一些分析列出来。也可以直接去观看风格指南:https://cn.vuejs.org/v2/style...
单文件组件文件的命名
文件名要么是单词开头大写,要么是横线连接
MyComponent.vue 或 my-component.vue
为组件样式设置作用域
除了根组件或者布局组件,都要加上 scoped 设置作用域,避免影响其它地方的样式
永远不要把 v-if 和 v-for 同时用在同一个元素上
- 如果要过滤列表,使其隐藏不符合条件的项目,可以使用计算属性,预先筛选出符合条件的数组
v-for="user in users" v-if="user.isActive" /** 要换成 **/ v-for="user in activeUsers" computed () { return this.users.filter((item) => { return item.isActive }) } 好处: * 过滤后的列表_只_会在`users`数组发生相关变化时才被重新运算,过滤更高效。 * 使用`v-for="user in activeUsers"`之后,我们在渲染的时候只遍历活跃用户,渲染更高效。 * 解耦渲染层的逻辑,可维护性 (对逻辑的更改和扩展) 更强。
- 如果希望控制列表显示,将 v-if 移到外层容器元素上
v-for="user in users" v-if="shouldShowUsers" /** 要换成 **/ <ul v-if="shouldShowUsers"> <li v-for="user in users"></li> </ul> 好处: * 如上 * 通过将 v-if 移动到容器元素,我们不会再对列表中的每个用户检查 shouldShowUsers。取而代之的是,我们只检查它一次,且不会在 shouldShowUsers 为否的时候运算 v-for。
Prop 定义
prop 尽量详细,不使用数组方式,而是用对象列出更多选项,至少需要指定其类型。
好处:
- 它们写明了组件的 API,所以很容易看懂组件的用法;
- 在开发环境下,如果向一个组件提供格式不正确的 prop,Vue 将会告警,以帮助你捕获潜在的错误来源。
Prop 名格式
prop 应当使用 驼峰命名法,而在模板和 JSX 中使用时,要用横线连接(HTML 的约定)
正确例子: <WelcomeMessage greeting-text="hi"/> props: { greetingText: String }
组件名为多个单词
组件名始终应该是多个单词,避免和将来的 HTML 元素相冲突,例如
export default { // name: 'Todo',不推荐 name: 'TodoItem' }
基础组件名
对于不包含全局状态的(比如 vuex store)、展示类的、无逻辑或无状态的基础组件,例如 table、button、icon 等,应该都以一个特定的前缀开头,统一风格且与其他功能组件区分开来
反例: components/ |- MyButton.vue |- VueTable.vue |- Icon.vue 正确例子: components/ |- BaseButton.vue |- BaseTable.vue |- BaseIcon.vue components/ |- AppButton.vue |- AppTable.vue |- AppIcon.vue components/ |- VButton.vue |- VTable.vue |- VIcon.vue
单例组件名
对于每个页面只使用一次、不接受任何 prop (即内容写死了)的组件(例如顶部的公司 logo、底部的版权声明),要以 The 前缀命名,以示其唯一性
反例: components/ |- Heading.vue |- MySidebar.vue 正确例子: components/ |- TheHeading.vue |- TheSidebar.vue
紧密耦合的组件名
对于和父组件紧密耦合的子组件(即只在指定的父组件里用到的),命名方式应该规范统一:父组件名+本身名字,因为编辑器通常会按字母顺序组织文件,所以这样做可以把相关联的文件排在一起。
注意:这里的父组件也是自定义组件
,例如自定义列表组件,其还有只在其本身使用的自定义列表 item 子组件、自定义按钮子组件,子组件命名要规范
现在通常做法(components 的父组件使用文件夹形式,包含 index.vue 和子组件文件夹): components/ |- TodoList/ |- Item/ |- index.vue |- Button.vue |- index.vue 或者单纯是命名上相似: components/ |- TodoList.vue |- TodoItem.vue |- TodoButton.vue 正确例子: components/ |- TodoList.vue |- TodoListItem.vue |- TodoListItemButton.vue components/ |- SearchSidebar.vue |- SearchSidebarNavigation.vue
自闭合组件
对于没有内容的组件,在允许的情况下要使用自闭合形式,以提醒使用者它们不仅没有内容,而且是刻意没有内容,且代码也更简洁。
允许的情况:单文件组件、字符串模板、JSX不允许的情况:DOM 模板(一些 HTML 元素中,例如 <ul>、<ol>、<table> 和 <select>,因为 HTML 不支持自闭合的自定义元素)
反例: <!-- 在单文件组件、字符串模板和 JSX 中 --> <MyComponent></MyComponent> <!-- 在 DOM 模板中 --> <my-component/> 正确例子: <!-- 在单文件组件、字符串模板和 JSX 中 --> <MyComponent/> <!-- 在 DOM 模板中 --> <my-component></my-component>
模板中的组件名格式
模板中组件名的书写方式,和文件的命名方式一样,要么是单词开头大写,要么是横线连接,两者不应该混用
还要注意,在 DOM 模板中,不支持单词大小写方式
,因为 HTML 是大小写不敏感的
正确例子: <!-- 在单文件组件和字符串模板中 --> <MyComponent/> <!-- 在 DOM 模板中 --> <my-component></my-component> 或者: <!-- 在所有地方 --> <my-component></my-component>
完整单词的组件名
组件名应该用完整的单词,而不是缩写。不要为了减少名字的长度而用缩写(尤其是不常用的缩写),现在编辑器的自动补全功能已经让写长命名的代价非常低,而完整的命名带来的明确理解性是非常宝贵的。
反例: components/ |- SdSettings.vue |- UProfOpts.vue 正确例子: components/ |- StudentDashboardSettings.vue |- UserProfileOptions.vue
多个 attribute 的元素
元素的多个 attribute 应该分多行,每个 attribute 一行,更易读
反例: <img src="https://vuejs.org/images/logo.png" alt="Vue Logo"> <MyComponent foo="a" bar="b" baz="c"/> 正确例子: <img src="https://vuejs.org/images/logo.png" alt="Vue Logo" > <MyComponent foo="a" bar="b" baz="c" />
模板中简单的表达式
组件模板应该只包含简单的表达式,复杂的表达式应该重构为计算属性或方法
反例: {{ fullName.split(' ').map(function (word) { return word[0].toUpperCase() + word.slice(1) }).join(' ') }} 正确例子: <!-- 在模板中 --> {{ normalizedFullName }} // 复杂表达式已经移入一个计算属性 computed: { normalizedFullName: function () { return this.fullName.split(' ').map(function (word) { return word[0].toUpperCase() + word.slice(1) }).join(' ') } }
分割计算属性
应该把复杂的计算属性分割成尽可能多的更简单的计算属性。这样易于测试及阅读,且在未来如果其中某一属性需要被显示,就不需要重构了
反例: computed: { price: function () { var basePrice = this.manufactureCost / (1 - this.profitMargin) return ( basePrice - basePrice * (this.discountPercent || 0) ) } } 正确例子: computed: { basePrice: function () { return this.manufactureCost / (1 - this.profitMargin) }, discount: function () { return this.basePrice * (this.discountPercent || 0) }, finalPrice: function () { return this.basePrice - this.discount } }
指令缩写
用 : 表示 v-bind:、用 @ 表示 v-on: 和用 # 表示 v-slot:,应该要么都用要么都不用。
scoped 中的元素选择器
在 scoped 的 scss/less/css 中,避免出现元素选择器,要使用 class 类选择器。
原因:
为了给样式设置作用域,Vue 会为元素添加一个独一无二的 attribute,例如 data-v-f3f3eg9。然后修改选择器,使得在匹配选择器的元素中,只有带这个 attribute 才会真正生效 (比如 button[data-v-f3f3eg9])。问题在于大量的元素和 attribute 组合的选择器 (比如 button[data-v-f3f3eg9]) 会比类和 attribute 组合的选择器慢,所以应该尽可能选用类选择器。
反例: <template> <button>X</button> </template> <style scoped> button { background-color: red; } </style> 正确例子: <template> <button class="btn btn-close">X</button> </template> <style scoped> .btn-close { background-color: red; } </style>
隐性的父子组件通信
应该优先通过 prop 和事件进行父子组件之间的通信,而不是 this.$parent 或变更 prop。
在 v-if/v-else-if/v-else 中使用 key
如果一组 v-if + v-else 的元素类型相同
,最好使用 key (比如两个 <div> 元素)。
默认情况下,Vue 会尽可能高效的更新 DOM。这意味着其在相同类型的元素之间切换时,会修补已存在的元素,而不是将旧的元素移除然后在同一位置添加一个新元素。如果本不相同的元素被识别为相同,则会出现意料之外的结果。
如下代码,在按钮点击切换时,不会触发 transition 效果,因为它是在本来的 button 上进行修改,没有进行移除新增操作。在这里查看效果
反例: <transition> <button v-if="isEditing" v-on:click="isEditing = false"> Save </button> <button v-else v-on:click="isEditing = true"> Edit </button> </transition> <style> .v-enter-active, .v-leave-active { transition: all 1s; } .v-enter, .v-leave-to { opacity: 0; transform: translateY(30px); } .v-leave-active { position: absolute; } </style>
解决方法:
正确例子: <transition> <button v-if="isEditing" v-on:click="isEditing = false" key="save"> Save </button> <button v-else v-on:click="isEditing = true" key="edit"> Edit </button> </transition>
这篇关于vue 风格指南解析的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-30毕设私活神器
- 2024-05-30html
- 2024-05-09一定要避坑:关于微信H5分享,温馨提示你不要再踩坑了!!!
- 2024-05-09本地项目放到公网访问!炒鸡煎蛋!
- 2024-04-07金融企业区域集中库的设计构想和测试验证
- 2024-03-11前端CSS的工程化——掌握Sass这四大特性就够了
- 2024-02-21h5关联css样式(html怎么和css关联)-icode9专业技术文章分享
- 2024-02-07Firefox禁止远程字体加速网页加载及图标字体补充安装
- 2024-02-07一个菜鸡前端的3年总结-「2023」
- 2024-01-18最火前端Web组态软件(可视化)