text: (window.webpackJsonp=window.webpackJsonp||[]).push([[32],{545:function(n,e,t){"use strict";t.r(e);var r=t(3),o=Object(r.a)({},(function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("ContentSlotsDistributor",{attrs:{"slot-key":n.$parent.slotKey}},[t("h2",{attrs:{id:"vue-风格指南"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#vue-风格指南"}},[n._v("#")]),n._v(" vue 风格指南")]),n._v(" "),t("div",{staticClass:"language- extra-class"},[t("pre",[t("code",[n._v('1. 组件命名尽量为多个单词\n2. data必须是个函数返回一个对象，new Vue除外\n3. prop定义应该尽量详细,写对象不要写数组\n4. 使用v-for时配合key\n5. v-if和v-for不要用在一起\n6. 组件样式设置作用域，使用scoped或使用css modules或使用BEM约定\n7. 使用模块作用域保持不允许外部访问的函数的私有性,如果无法做到这一点,就始终为插件、混入等\n   不考虑作为对外公共 API 的自定义私有 property 使用 $_ 前缀,并附带一个命名空间以回避和其它作者的冲突 (比如 $_yourPluginName_)\n8. 一个组件一个文件,不要集中在引入文件中\n9. 单文件组件的文件名应该要么始终是单词大写开头 (PascalCase),要么始终是横线连接 (kebab-case)\n    如：MyComponent.vue或者my-component.vue\n10. 应用特定样式和约定的基础组件名 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头,比如 Base、App 或 V\n    如：BaseButton.vue或者AppButton.vue或者VButton.vue\n11. 单例组件名: 只应该拥有单个活跃实例的组件应该以 The 前缀命名,以示其唯一性\n    如：TheHeading.vue或者TheSidebar.vue\n    这不意味着组件只可用于一个单页面,而是每个页面只使用一次,这些组件永远不接受任何 prop\n    因为它们是为你的应用定制的,而不是它们在你的应用中的上下文,如果你发现有必要添加 prop\n    那就表明这实际上是一个可复用的组件,只是目前在每个页面里只使用一次\n12. 紧密耦合的组件名: 和父组件紧密耦合的子组件应该以父组件名作为前缀命名\n    如：TodoList.vue --\x3e TodoListItem.vue --\x3e TodoListItemButton.vue\n    如果一个组件只在某个父组件的场景下有意义,这层关系应该体现在其名字上\n    因为编辑器通常会按字母顺序组织文件,所以这样做可以把相关联的文件排在一起\n13. 组件名中的单词顺序: 组件名应该以高级别的 (通常是一般化描述的) 单词开头,以描述性的修饰词结尾\n    如：SearchButtonClear.vue或者SearchButtonRun.vue\n14. 自闭合组件: 在单文件组件、字符串模板和 JSX 中没有内容的组件应该是自闭合的——但在 DOM 模板里永远不要这样做\n    自闭合组件表示它们不仅没有内容,而且刻意没有内容其不同之处就好像书上的一页白纸对比贴有“本页有意留白”标签的白纸\n    而且没有了额外的闭合标签,你的代码也更简洁\n    不幸的是,HTML 并不支持自闭合的自定义元素——只有官方的“空”元素\n    所以上述策略仅适用于进入 DOM 之前 Vue 的模板编译器能够触达的地方,然后再产出符合 DOM 规范的 HTML\n15. 在单文件组件、字符串模板和 JSX 中:\n    <MyComponent/>\n    在 DOM 模板中:\n    <my-component></my-component>\n16. 模板中的组件名大小写: 对于绝大多数项目来说,在单文件组件和字符串模板中组件名应该总是 PascalCase 的\n    但是在 DOM 模板中总是 kebab-case 的,由于 HTML 是大小写不敏感的,在 DOM 模板中必须仍使用 kebab-case\n17. 完整单词的组件名: 组件名应该倾向于完整单词而不是缩写\n18. Prop 名大小写: 在声明 prop 的时候,其命名应该始终使用 camelCase,而在模板和 JSX 中应该始终使用 kebab-cas\n    props: {\n        greetingText: String\n    }\n    <WelcomeMessage greeting-text="hi"/>\n19. 多个 attribute 的元素: 多个 attribute 的元素应该分多行撰写,每个 attribute 一行\n20. <img\n        src="https://vuejs.org/images/logo.png"\n        alt="Vue Logo"\n    />\n21. 模板中简单的表达式: 组件模板应该只包含简单的表达式,复杂的表达式则应该重构为计算属性或方法\n22. 带引号的 attribute 值: 非空 HTML attribute 值应该始终带引号 (单引号或双引号,选你 JS 里不用的那个)\n    <AppSidebar :style="{ width: sidebarWidth + \'px\' }" />\n23. 组件/实例的选项的顺序:\n    1. 副作用 (触发组件外的影响)\n        el\n    2. 全局感知 (要求组件以外的知识)\n        name\n        parent\n    3. 组件类型 (更改组件的类型)\n        functional\n    4. 模板修改器 (改变模板的编译方式)\n        delimiters\n        comments\n    5. 模板依赖 (模板内使用的资源)\n        components\n        directives\n        filters\n    6. 组合 (向选项里合并 property)\n        extends\n        mixins\n    7. 接口 (组件的接口)\n        inheritAttrs\n        model\n        props/propsData\n    8. 本地状态 (本地的响应式 property)\n        data\n        computed\n    9. 事件 (通过响应式事件触发的回调)\n        watch\n        生命周期钩子 (按照它们被调用的顺序)\n            beforeCreate\n            created\n            beforeMount\n            mounted\n            beforeUpdate\n            updated\n            activated\n            deactivated\n            beforeDestroy\n            destroyed\n    10. 非响应式的 property (不依赖响应系统的实例 property)\n        methods\n    11. 渲染 (组件输出的声明式描述)\n        template/render\n        renderError\n24. 元素 attribute 的顺序:\n    1. 定义 (提供组件的选项)\n        is\n    2. 列表渲染 (创建多个变化的相同元素)\n        v-for\n    3. 条件渲染 (元素是否渲染/显示)\n        v-if\n        v-else-if\n        v-else\n        v-show\n        v-cloak\n    4. 渲染方式 (改变元素的渲染方式)\n        v-pre\n        v-once\n    5. 全局感知 (需要超越组件的知识)\n        id\n    6. 唯一的 attribute (需要唯一值的 attribute)\n        ref\n        key\n    7. 双向绑定 (把绑定和事件结合起来)\n        v-model\n    8. 其它 attribute (所有普通的绑定或未绑定的 attribute)\n    9. 事件 (组件事件监听器)\n        v-on\n    10. 内容 (覆写元素的内容)\n        v-html\n        v-text\n25. 可以在每个代码块后面加一行空行方便阅读\n26. 单文件组件的顶级元素的顺序: 单文件组件应该总是让 <script>、<template> 和 <style>\n    标签的顺序保持一致,且 <style> 要放在最后,因为另外两个标签至少要有一个\n27. 在有scoped的style中尽量使用类选择器不要用元素选择器\n28. 应该优先通过 prop 和事件进行父子组件之间的通信,而不是 this.$parent 或变更 prop\n29. 应该优先通过 Vuex 管理全局状态,而不是通过 this.$root 或一个全局事件总线\n')])])]),t("div",{staticClass:"custom-block tip"},[t("p",[n._v("作者：chenjie "),t("br"),n._v("\n链接：https://webchenjie.cn "),t("br"),n._v("\n来源：ChenJieBlog")])])])}),[],!1,null,null,null);e.default=o.exports}}]);