微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

Vue精简版风格概述

分类：Vue作者：编程之家AI导航网

前面的话

Vue官网的风格指南按照优先级（依次为必要、强烈推荐、推荐、谨慎使用）分类，且代码间隔较大，不易查询。本文按照类型分类，并对部分示例或解释进行缩减，是Vue风格指南的精简版

组件名称

【组件名为多个单词】（必要）

组件名应该始终是多个单词的，根组件 App 除外。 这样做可以避免跟现有的以及未来的 HTML 元素相冲突，因为所有的 HTML 元素名称都是单个单词的

//bad Vue.component('todo',{})//good Vue.component('todo-item',{})

【单文件组件文件名应该要么始终是单词大写开头 (PascalCase)，要么始终横线连接 (kebab-case)】（强烈推荐）

//bad mycomponent.vue //good MyComponent.vue //good my-component.vue

【基础组件名要有一个特定前缀开头】（强烈推荐）

应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头，比如 Base、App 或 V

//bad components/ |- MyButton.vue |- VueTable.vue |- Icon.vue //good components/ |- BaseButton.vue |- BaseTable.vue |- BaseIcon.vue

【只应该拥有单个活跃实例的组件应该以The前缀命名，以示其唯一性】（强烈推荐）

这不意味着组件只可用于一个单页面，而是每个页面只使用一次，这些组件永远不接受任何 prop

//bad components/ |- heading.vue |- MySidebar.vue //good components/ |- Theheading.vue |- TheSidebar.vue

【和父组件紧密耦合的子组件应该以父组件名作为前缀命名】（强烈推荐）

//bad components/ |- TodoList.vue |- TodoItem.vue |- Todobutton.vue //good components/ |- SearchSidebar.vue |- SearchSidebarNavigation.vue

【组件名应该以高级别的 (通常是一般化描述的) 单词开头，以描述性的修饰词结尾】（强烈推荐）

//bad components/ |- ClearSearchButton.vue |- ExcludeFromSearchInput.vue |- LaunchOnStartupCheckBox.vue |- RunSearchButton.vue |- SearchInput.vue |- TermsCheckBox.vue //good components/ |- SearchButtonClear.vue |- SearchButtonRun.vue |- SearchInputQuery.vue |- SearchInputExcludeGlob.vue |- SettingsCheckBoxTerms.vue |- SettingsCheckBoxLaunchOnStartup.vue

【单文件组件和字符串模板中组件名应总是PascalCase——但在DOM模板中总是kebab-case】（强烈推荐）

//bad //good

【组件名应该倾向于完整单词而不是缩写】（强烈推荐）

//bad components/ |- SdSettings.vue |- UProfOpts.vue //good components/ |- StudentDashboardSettings.vue |- UserProfileOptions.vue

组件相关

【单文件组件、字符串模板和JSX中没有内容的组件应该自闭合——但在DOM模板里不要这样做】（强烈推荐）

自闭合组件表示它们不仅没有内容，而且刻意没有内容

//bad //good

【为组件样式设置作用域】（必要）

这条规则只和单文件组件有关。不一定要使用scoped特性。设置作用域也可以通过CSS Modules，或者使用其它的库或约定

//bad //good //good

【单文件组件应该总是让

【一个文件中只有一个组件】（强烈推荐）

//bad Vue.component('TodoList',{}) Vue.component('TodoItem',{}) //good components/ |- TodoList.vue |- TodoItem.vue

【组件选项默认顺序】（推荐）

1、副作用 (触发组件外的影响)

el

2、全局感知 (要求组件以外的知识)

name parent

3、组件类型 (更改组件的类型)

functional

4、模板修改器 (改变模板的编译方式)

delimiters comments

5、模板依赖 (模板内使用的资源)

components directives filters

6、组合 (向选项里合并属性)

extends mixins

7、接口 (组件的接口)

inheritAttrs model props/propsData

8、本地状态 (本地的响应式属性)

data computed

9、事件 (通过响应式事件触发的回调)

watch生命周期钩子 (按照它们被调用的顺序)

10、非响应式的属性 (不依赖响应系统的实例属性)

methods

11、渲染 (组件输出的声明式描述)

template/render renderError

prop

【Prop 定义应该尽量详细】（必要）

细致的 prop 定义有两个好处： 1、它们写明了组件的 API，所以很容易看懂组件的用法； 2、在开发环境下，如果向一个组件提供格式不正确的 prop，Vue 将会告警，以帮助你捕获潜在的错误来源

//bad props: ['status'] //good props: { status: String } //better props: { status: { type: String,required: true } }

【声明prop时，其命名应始终使用camelCase，而在模板和JSX中应始终使用kebab-case】（强烈推荐）

//bad props: {'greeting-text': String}

指令及特性

【总是用 key 配合 v-for】（必要）

//bad
  • odo in todos"> //good
  • odo in todos":key="todo.id">

    • 【不要把 v-if 和 v-for 同时用在同一个元素上】（必要）

    //bad
  • {{ user.name }}
  • //good
  • {{ user.name }}

    • 【多个特性的元素应该分多行撰写，每个特性一行】（强烈推荐）

    //bad logo.png"> //good

    【元素特性默认顺序】（推荐）

    1、定义 (提供组件的选项)

    is

    2、列表渲染 (创建多个变化的相同元素)

    v-for

    3、条件渲染 (元素是否渲染/显示)

    v-if v-else-if v-else v-show v-cloak

    4、渲染方式 (改变元素的渲染方式)

    v-pre v-once

    5、全局感知 (需要超越组件的知识)

    id

    6、唯一的特性 (需要唯一值的特性)

    ref key slot

    7、双向绑定 (把绑定和事件结合起来)

    v-model

    8、其它特性 (所有普通的绑定或未绑定的特性)

    9、事件 (组件事件监听器)

    v-on

    10、内容 (复写元素的内容)

    v-html v-text

    属性

    【私有属性名】（必要）

    在插件、混入等扩展中始终为自定义的私有属性使用 $_ 前缀，并附带一个命名空间以回避和其它作者的冲突 (比如 $_yourPluginName_)

    //bad methods: {update: function () { }} //bad methods: {_update: function () { } } //bad methods: {$update: function () { }} //bad methods: {$_update: function () { }} //good methods: { $_myGreatMixin_update: function () { }}

    【组件的data必须是一个函数】（必要）

    当在组件中使用 data 属性的时候 (除了 new Vue 外的任何地方)，它的值必须是返回一个对象的函数

    //bad Vue.component('some-comp',{ data: { foo: 'bar' } }) //good Vue.component('some-comp',{ data: function () { return { foo: 'bar' } } })

    【组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或方法】（强烈推荐）

    //bad {{ fullName.split(' ').map(function (word) { return word[0].toupperCase() + word.slice(1) }).join(' ') }} //good computed: { normalizedFullName: function () { return this.fullName.split(' ').map(function (word) { return word[0].toupperCase() + word.slice(1) }).join(' ') } }

    【应该把复杂计算属性分割为尽可能多的更简单的属性】（强烈推荐）

    //bad computed: { price: function () { var basePrice = this.manufactureCost / (1 - this.profitMargin) return ( basePrice - basePrice * (this.discountPercent || 0) ) } } //good computed: { basePrice: function () { return this.manufactureCost / (1 - this.profitMargin) },discount: function () { return this.basePrice * (this.discountPercent || 0) },finalPrice: function () { return this.basePrice - this.discount } }

    【当组件开始觉得密集或难以阅读时，在多个属性之间添加空行可以让其变得容易】（推荐）

    //good props: { value: { type: String,required: true },focused: { type: Boolean,default: false } }

    谨慎使用

    1、元素选择器应该避免在 scoped 中出现

    在scoped样式中，类选择器比元素选择器更好，因为大量使用元素选择器是很慢的

    //bad //good

    2、应该优先通过 prop 和事件进行父子组件之间的通信，而不是this.$parent或改变 prop

    3、应该优先通过Vuex管理全局状态，而不是通过this.$root或一个全局事件总线

    4、如果一组v-if+v-else的元素类型相同，最好使用key(比如两个

    元素)

    //bad
    错误：{{ error }}
    {{ results }}
    //good
    错误：{{ error }}

    {{ results }}

    版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

    相关推荐

    vue3的defineAsyncComponent是如何实现异步组件的呢？
    这篇文章我们将通过debug源码的方式来带你搞清楚defineAsyncComponent是如何实现异步组件的
    这年头，好好分享前端高质量文章也要被怼
    欧阳老老实实的更新自己的高质量vue源码文章，还被某2.6k star的开源大佬给怼了。被怼了后气不过把截图（未打码）发粉丝群和朋友圈，结果发现还免费给他的开源项目打广告了。欧阳真的是越想越气
    Vue3.5中解构props，让父子组件通信更加丝滑
    前言 在Vue3.5版本中响应式 Props 解构终于正式转正了，这个功能之前一直是试验性的。这篇文章来带你搞清楚，一个String类型的props经过解构后明明应该是一个常量了，为什么还没丢失响应式呢？本文中使用的Vue版本为欧阳写文章时的最新版Vue3.5.5 关注公众号：【前端欧阳】，给自己一
    用了组合式 (Composition) API 后代码变得更乱了，怎么办？
    组合式 (Composition) API 的一大特点是“非常灵活”，但也因为非常灵活，也可能导致我们的代码变得愈发混乱，最终到达无法维护的地步。
    最近很火的Vue Vine是如何实现一个文件中写多个组件
    相信你最近应该看到了不少介绍Vue Vine的文章，这篇文章我们另辟蹊径来讲讲Vue Vine是如何实现在一个文件里面写多个vue组件。
    牛逼！在Vue3.5中仅仅2分钟就能封装一个自动cancel的fetch函数
    前言 在欧阳的上一篇 这应该是全网最详细的Vue3.5版本解读文章中有不少同学对Vue3.5新增的onWatcherCleanup有点疑惑，这个新增的API好像和watch API回调的第三个参数onCleanup功能好像重复了。今天这篇文章来讲讲新增的onWatcherCleanup函数的使用场景
    想看源码但是无从下口怎么办？
    相信不少同学都有欧阳这种情况，年初的时候给自己制定了一份关于学习英语和源码的详细年度计划。但是到了实际执行的时候因为各种情况制定的计划基本都没有完成，年底回顾时发现年初制定的计划基本都没完成。痛定思痛，第二年年初决定再次制定一份学习英语和源码的详细年度计划，毫无疑问又失败了。
    给我5分钟，保证教会你在vue3中动态加载远程组件
    前言 在一些特殊的场景中（比如低代码、减少小程序包体积、类似于APP的热更新），我们需要从服务端动态加载.vue文件，然后将动态加载的远程vue组件渲染到我们的项目中。今天这篇文章我将带你学会，在vue3中如何去动态加载远程组件。 欧阳写了一本开源电子书vue3编译原理揭秘，这本书初中级前端能看懂。
    React的useId，现在Vue3.5终于也有了！
    前言 React在很早之前的版本中加了useId，用于生成唯一ID。在Vue3.5版本中，终于也有了期待已久的useId。这篇文章来带你搞清楚useId有哪些应用场景，以及他是如何实现的。 关注公众号：【前端欧阳】，给自己一个进阶vue的机会 useId的作用 他的作用也是生成唯一ID，同一个Vue
    卧槽，牛逼！vue3的组件竟然还能“暂停”渲染！
    有没有一种完美的方案，从服务端获取数据的逻辑放在子组件中，并且在获取数据的期间让子组件“暂停”一下，先不去渲染，等到数据请求完成后再第一次去渲染子组件呢？
    苹果市值2025年有望达4万亿美元
    pythonJavaScriptjavaHTMLreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-bootreact-native