脚本宝典收集整理的这篇文章主要介绍了

Vue官方推荐的风格指南

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<h1 id="articleHeader0"><a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>官方推荐的风格指南-个人笔记</h1> <p>最近刚注意到vue官方多了一个vue风格指南的推荐。</p> <p>因为业务中一直用的vue,所以梳理学习一下,来增加自己代码的规范性,效果不错也可以安利到团队。</p> <p>文档没有对JS或者<a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a>风格做约束,而是仅仅针对vue代码做了分类推荐。</p> <p><span class="img-wrap"><img data-src="/img/bVbc3gM?w=1375&amp;h=1361" src="/img/bVbc3gM?w=1375&amp;h=1361" alt="clipboard.png" title="clipboard.png" style="cursor: pointer; display: inline;"></span></p> <blockquote><p>一共按照优先级分4类:</p></blockquote> <ul> <li> <strong>优先级A:必要的。</strong>为了规避错误,这种代码风格是必须的</li> <li> <strong>优先级B:强烈推荐。</strong>增加项目的可读性和开发体验</li> <li> <strong>优先级C:推荐。</strong>有时可能同时有几种不错的选择。需要注意:前后一致、理由充分</li> <li> <strong>优先级D:谨慎使用。</strong>为了该有潜在风险的代码敲个警钟。</li> </ul> <h2 id="articleHeader1">为什么写这篇文文章?</h2> <p>对我来说有2个目的,</p> <ul> <li>一是通过思维导图 + 博客输出的方式加深印象</li> <li> <p>二是学习过程中具体的小问题,应该用自己的话试着再解释一遍。</p> <ul> <li>比如<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>组需要有css作用域。但是scoped和css module有什么区别吗?</li> <li>比如v-for和v-if为什么不推荐绑定在一个元素上?</li> </ul> </li> </ul> <h2 id="articleHeader2">1.优先级A的code style</h2> <p>这些推荐,必须遵守。如果不这么做,基本要造成性能低或可维护性差的问题</p> <ul> <li>1.vue组件名称推荐由多个单词构成</li> <li>2.组件data数据推荐用函数return</li> <li>3.props推荐更加详细的定义type/default/require等</li> <li>4.v-for推荐有配套的:key</li> <li>5.v-for和v-if避免同在一起</li> <li>6.vue组件样式推荐设置作用域</li> <li>7.自定义的私有属性,推荐$_ + 命名空间作为前缀</li> </ul> <p>下面是每一条风格指南的推荐理由,我觉得需要在意的,用<strong>粗体标注</strong></p> <blockquote><p>1.vue组件名称推荐由多个单词构成</p></blockquote> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="为了避免vue组件名和未来html元素的名称重复。因为html的标签都是单个单词" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs"><code style="word-break: break-word; white-space: initial;">为了避免vue组件名和未来html元素的名称重复。因为html的标签都是单个单词</code></pre> <blockquote><p>2.组件data数据推荐用函数return</p></blockquote> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="除了根组件之外,其他的vue组件很可能被复用,如果data是{},那么这些组件的数据会互相影响。 但是我们希望每一个组件,即便是被复用的组件,每个组件的data都应该是独立的状态" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs haskell"><code>除了根组件之外,其他的vue组件很可能被复用,如果<span class="hljs-class"><span class="hljs-keyword">data</span>是{},那么这些组件的数据会互相影响。</span> 但是我们希望每一个组件,即便是被复用的组件,每个组件的<span class="hljs-class"><span class="hljs-keyword">data</span>都应该是独立的状态</span></code></pre> <blockquote><p>3.props推荐用更加详细的定义</p></blockquote> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="//很好理解,详细的约定肯定比简写的约定更可靠。 props: { // 推荐 name : { type: String, default: 'ziwei', required: true } } props: ['name'] // 不推荐" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-comment">//很好理解,详细的约定肯定比简写的约定更可靠。</span> props: { <span class="hljs-comment">// 推荐</span> name : { <span class="hljs-attr">type</span>: <span class="hljs-built_in">String</span>, <span class="hljs-attr">default</span>: <span class="hljs-string">'ziwei'</span>, <span class="hljs-attr">required</span>: <span class="hljs-literal">true</span> } } props: [<span class="hljs-string">'name'</span>] <span class="hljs-comment">// 不推荐</span></code></pre> <blockquote><p><strong>4.v-for推荐配套的:key</strong></p></blockquote> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="为了更加高效的渲染dom。vue有“就地复用”的策略。 比如一个列表的数据没变,只是顺序发生了改变。如果所有列表的dom重新渲染就很“浪费” 但是通过唯一的:key复用之前的dom的话,性能就好很多。 " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs css"><code>为了更加高效的渲染<span class="hljs-selector-tag">dom</span>。<span class="hljs-selector-tag">vue</span>有“就地复用”的策略。 比如一个列表的数据没变,只是顺序发生了改变。如果所有列表的<span class="hljs-selector-tag">dom</span>重新渲染就很“浪费” 但是通过唯一的<span class="hljs-selector-pseudo">:key</span>复用之前的<span class="hljs-selector-tag">dom</span>的话,性能就好很多。 </code></pre> <blockquote><p><strong>5.v-for和v-if避免使用在同一个组件里</strong></p></blockquote> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="这里推荐看文档,例子和解释都很清晰。v-for和v-if同时出现的话,先v-for,后v-if 有v-for和v-if同时写到li上的情况有2种: - 如果是希望控制ul的显示/隐藏,推荐放到ul上,而不是li上。这样“节省”了li的渲染 - 如果是因为根据条件控制部分li的显示/隐藏,建议用把ul数据对象改成计算属性。 " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs objectivec"><code>这里推荐看文档,例子和解释都很清晰。v-<span class="hljs-keyword">for</span>和v-<span class="hljs-keyword">if</span>同时出现的话,先v-<span class="hljs-keyword">for</span>,后v-<span class="hljs-keyword">if</span> 有v-<span class="hljs-keyword">for</span>和v-<span class="hljs-keyword">if</span>同时写到li上的情况有<span class="hljs-number">2</span>种: - 如果是希望控制ul的显示/隐藏,推荐放到ul上,而不是li上。这样“节省”了li的渲染 - 如果是因为根据条件控制部分li的显示/隐藏,建议用把ul数据对象改成计算属性。 </code></pre> <blockquote><p><strong>6.vue组件样式推荐设置作用域</strong></p></blockquote> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="可以使用scoped和css module。但是两者还是有一些区别的。 scoped被设计的初衷是不能让当前组件的样式,影响其他组件的样式。所以你写组件库,不要用scoped css moudle是利用命名空间和hash来保证作用域 " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs ruby"><code>可以使用scoped和css <span class="hljs-class"><span class="hljs-keyword">module</span>。但是两者还是有一些区别的。</span> scoped被设计的初衷是不能让当前组件的样式,影响其他组件的样式。所以你写组件库,不要用scoped css moudle是利用命名空间和hash来保证作用域 </code></pre> <p>关于两者区别的链接</p> <p><a href="https://juejin.im/post/5a1c0640f265da4335627c6a" rel="nofollow noreferrer" target="_blank">https://juejin.im/post/5a1c06...</a><br /><a href="https://www.jb51.net/article/140373.htm" rel="nofollow noreferrer" target="_blank">https://www.jb51.net/article/...</a></p> <p>关于css选择器对渲染性能的影响 </p> <p><a href="https://www.jianshu.com/p/268c7f3dd7a6" rel="nofollow noreferrer" target="_blank">https://www.jianshu.com/p/268...</a></p> <blockquote><p>7.自定义的私有属性,推荐$_ + 命名空间作为前缀</p></blockquote> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="我理解这里,就是如果你要第三方插件或者,要自定义vue属性时。 vue给你推荐了一种命名空间,比如这样定义 $_myUtils_sayHi" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs perl"><code>我理解这里,就是如果你要第三方插件或者,要自定义vue属性时。 vue给你推荐了一种命名空间,比如这样定义 $_myUtils_sayHi</code></pre> <h2 id="articleHeader3">优先级B的code style</h2> <ul> <li>1.能用.vue写的组件,尽量不同vue.component</li> <li>2.vue组件命名,用PascalCase或者短横线,风格保持统一。</li> <li>3.基础组件命名,以Base前缀开头,以显示其通用性</li> <li>4.单例组件命名,以The前缀开头,以显示其独特性</li> <li>5.紧密耦合的组件命名。比如紧密耦合的父子组件,子组件以父组件名称为前缀</li> <li>6.组件命名单词的顺序。先名词后形容词</li> <li>7.自闭合组件的写法。如果有编译器的vue用自闭合写法,以显示没有传入属性</li> <li>8.不同模板中vue命名大小写。如果有编译器的话PascalCase,否则用短横线命名</li> <li>9.JS/<a href="http://www.js-code.com/tag/jsx" title="JSX" target="_blank">JSX</a>中始终用PascalCase组件命名</li> <li>10.组件命名单词应该是完整的单词</li> <li>11.props的命名方式,最自然的方法。JS里用驼峰命名,html里用短横线</li> <li>12.vue组件有多个属性,分多行来写更加清晰易读</li> <li>13.模板里复杂逻辑用计算属性或者method</li> <li>14.复杂的计算属性或者method,拆分成多个</li> <li>15.html模板的属性推荐用双引号的</li> <li>16.指令缩写要么不写,要么都用缩写</li> </ul> <p>下面是每一条风格指南的推荐理由,我觉得需要在意的,用<strong>粗体标注</strong></p> <blockquote><p>1.能用.vue写的组件,尽量不同vue.component</p></blockquote> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="好理解,vue单文件组织代码,是官方推荐的最佳实践,基本都是这样用" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs"><code style="word-break: break-word; white-space: initial;">好理解,vue单文件组织代码,是官方推荐的最佳实践,基本都是这样用</code></pre> <blockquote><p><strong>2.vue组件名称,用PascalCase或者短横线,风格保持统一</strong></p></blockquote> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="这个可以注意下,PascalCase是类似OrderSku.vue这种命名风格 我之前经常用驼峰命名vue组件" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs css"><code>这个可以注意下,<span class="hljs-selector-tag">PascalCase</span>是类似<span class="hljs-selector-tag">OrderSku</span><span class="hljs-selector-class">.vue</span>这种命名风格 我之前经常用驼峰命名<span class="hljs-selector-tag">vue</span>组件</code></pre> <blockquote><p>3.基础组件命名,以Base前缀开头,以显示其通用性</p></blockquote> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="BaseHeader.vue BaseContent.vue BaseFooter.vue // 这类风格,通过名字,可以理解它是通用基础组件" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js">BaseHeader.vue BaseContent.vue BaseFooter.vue <span class="hljs-comment">// 这类风格,通过名字,可以理解它是通用基础组件</span></code></pre> <blockquote><p>4.单例组件命名,以The前缀开头,以显示其独特性</p></blockquote> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="类似设计模式里的单例模式,就是这个vue组件只在一个页面出现一次。 TheSideBar.vue这种名字,可以表示它是独一无二的不可复用的组件 如果某个组件只是在每个页面最多用了一次,并且没有props。就是不可复用组件,用The前缀命名。" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs css"><code>类似设计模式里的单例模式,就是这个<span class="hljs-selector-tag">vue</span>组件只在一个页面出现一次。 <span class="hljs-selector-tag">TheSideBar</span><span class="hljs-selector-class">.vue</span>这种名字,可以表示它是独一无二的不可复用的组件 如果某个组件只是在每个页面最多用了一次,并且没有<span class="hljs-selector-tag">props</span>。就是不可复用组件,用<span class="hljs-selector-tag">The</span>前缀命名。</code></pre> <blockquote><p>5.紧密耦合的组件命名。比如紧密耦合的父子组件,子组件以父组件名称为前缀</p></blockquote> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="MainOrder.vue MainOrderItem.vue // 类似这种紧密耦合的父子组件,子组件把父组件的名字作为前缀。 // 这样这样可以通过名称,显示他们的耦合关系,并且在编辑器里也很好找到" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs objectivec"><code>MainOrder.vue MainOrderItem.vue <span class="hljs-comment">// 类似这种紧密耦合的父子组件,子组件把父组件的名字作为前缀。</span> <span class="hljs-comment">// 这样这样可以通过名称,显示他们的耦合关系,并且在编辑器里也很好找到</span></code></pre> <blockquote><p><strong>6.组件命名单词的顺序。先名词后形容词</strong></p></blockquote> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="|- ClearSearchButton.vue |- ExcludeFromSearchInput.vue |- LaunchOnStartupCheckbox.vue |- RunSearchButton.vue |- SearchInput.vue |- TermsCheckbox.vue |- SearchButtonClear.vue |- SearchButtonRun.vue |- SearchInputExcludeGlob.vue |- SearchInputQuery.vue |- SettingsCheckboxLaunchOnStartup.vue |- SettingsCheckboxTerms.vue // 大概可以感受到吧,我理解是因为编辑器的默认排序是按照字母排序。这样方便我们找到相似的文件" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js">|- ClearSearchButton.vue |- ExcludeFromSearchInput.vue |- LaunchOnStartupCheckbox.vue |- RunSearchButton.vue |- SearchInput.vue |- TermsCheckbox.vue |- SearchButtonClear.vue |- SearchButtonRun.vue |- SearchInputExcludeGlob.vue |- SearchInputQuery.vue |- SettingsCheckboxLaunchOnStartup.vue |- SettingsCheckboxTerms.vue <span class="hljs-comment">// 大概可以感受到吧,我理解是因为编辑器的默认排序是按照字母排序。这样方便我们找到相似的文件</span></code></pre> <blockquote><p><strong>7.自闭合组件的写法。</strong></p></blockquote> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<App ></span><br /> 自闭合组件是vue推荐的写法。自闭合可以表示组件没有任何属性</p> <p>但是如果你用的是没有编译器的vue版本,也就是不用.vue的话,那么html里不支持自定义属性的自闭合写法。<br /> 所以这种情况下,只能用短横线写法" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">App</span> /&gt;</span> 自闭合组件是vue推荐的写法。自闭合可以表示组件没有任何属性 但是如果你用的是没有编译器的vue版本,也就是不用.vue的话,那么html里不支持自定义属性的自闭合写法。 所以这种情况下,只能用短横线写法</code></pre> <blockquote><p>8.不同模板中vue命名大小写。如果有编译器的话PascalCase,否则用短横线命名</p></blockquote> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="类似的,SkuOrder.vue这类PascalCase命名规则是vue推荐的 但是如果是没有编译器的vue版本,在html里大小写不敏感,你只能用短横线命名。" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs css"><code>类似的,<span class="hljs-selector-tag">SkuOrder</span><span class="hljs-selector-class">.vue</span>这类<span class="hljs-selector-tag">PascalCase</span>命名规则是<span class="hljs-selector-tag">vue</span>推荐的 但是如果是没有编译器的<span class="hljs-selector-tag">vue</span>版本,在<span class="hljs-selector-tag">html</span>里大小写不敏感,你只能用短横线命名。</code></pre> <blockquote><p>9.JS/<a href="http://www.js-code.com/tag/jsx" title="JSX" target="_blank">JSX</a>中始终用PascalCase组件命名</p></blockquote> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="因为官方推荐PascalCase风格命名,所以能用就用" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs"><code style="word-break: break-word; white-space: initial;">因为官方推荐PascalCase风格命名,所以能用就用</code></pre> <blockquote><p><strong>10.组件命名单词应该是完整的单词</strong></p></blockquote> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="完整单词带易读性的好处,和书写麻烦的缺点。 但是编辑器的智能提示已经解决了写长单词的麻烦了,所以还是推荐用完整单词" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs"><code>完整单词带易读性的好处,和书写麻烦的缺点。 但是编辑器的智能提示已经解决了写长单词的麻烦了,所以还是推荐用完整单词</code></pre> <blockquote><p><strong>11.props的命名方式</strong></p></blockquote> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="props: { greetingText: String } <WelcomeMessage greeting-text=&quot;hi&quot;></span></p> <p>最自然的方法。JS里用驼峰命名,html里用短横线。这个要注意,我之前很随意" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js">props: { <span class="hljs-attr">greetingText</span>: <span class="hljs-built_in">String</span> } &lt;WelcomeMessage greeting-text=<span class="hljs-string">"hi"</span>/&gt; 最自然的方法。JS里用驼峰命名,html里用短横线。这个要注意,我之前很随意</code></pre> <blockquote><p><strong>12.vue组件有多个属性,分多行来写更加清晰易读</strong></p></blockquote> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<MyComponent foo=&quot;a&quot; bar=&quot;b&quot; baz=&quot;c&quot; ></span><br /> 好理解,分多行写的话易读性更强,这个我之前没注意" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js">&lt;MyComponent foo=<span class="hljs-string">"a"</span> bar=<span class="hljs-string">"b"</span> baz=<span class="hljs-string">"c"</span> /&gt; 好理解,分多行写的话易读性更强,这个我之前没注意</code></pre> <blockquote><p>13.模板里复杂逻辑用计算属性或者method (很好理解,就不解释了)<br />14.复杂的计算属性或者method,拆分成多个 (很好理解,就不解释了)</p> <p><strong>15.html模板的属性推荐用双引号的</strong></p> </blockquote> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="这个注意下,我之前很不喜欢在html里写“”,因为我觉得双引号容易让人误以为是string 但是官方推荐用引号,说是在有空格的情况下,可能缩进不正常,影响易读性。所以乖乖听话就完事了" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code>这个注意下,我之前很不喜欢在html里写“”,因为我觉得双引号容易让人误以为是<span class="hljs-built_in">string</span> 但是官方推荐用引号,说是在有空格的情况下,可能缩进不正常,影响易读性。所以乖乖听话就完事了</code></pre> <blockquote><p><strong>16.指令缩写要么不写,要么都用缩写</strong></p></blockquote> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="注意保持风格统一,要么不写,要么都写" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs"><code style="word-break: break-word; white-space: initial;">注意保持风格统一,要么不写,要么都写</code></pre> <h2 id="articleHeader4">3.优先级C的code style (推荐看文档)</h2> <p>推荐看文档,因为文档推荐了顺序,但是大部分选型我都不常用,所以我只给自己常用的的选项排序</p> <ul> <li>1.组件实例选项的顺序</li> <li>2.元素特性的顺序</li> <li>3.组件实例选项,之间添加一个空行</li> <li>4.单文件组件的顶级元素的组织顺序</li> </ul> <blockquote><p>1.组件实例选项的顺序</p></blockquote> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="- components - filters - data - compouted - watch - 所有的生命周期钩子 - methods " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs markdown"><code><span class="hljs-bullet">- </span>components <span class="hljs-bullet">- </span>filters <span class="hljs-bullet">- </span>data <span class="hljs-bullet">- </span>compouted <span class="hljs-bullet">- </span>watch <span class="hljs-bullet">- </span>所有的<a href="http://www.js-code.com/tag/%e7%94%9f%e5%91%bd%e5%91%a8%e6%9c%9f%e9%92%a9%e5%ad%90" title="浏览关于“生命周期钩子”的文章" target="_blank" class="tag_link">生命周期钩子</a> <span class="hljs-bullet">- </span>methods </code></pre> <blockquote><p>2.元素特性的顺序</p></blockquote> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="- v-for - v-if / v-show - id - ref / key / slot - v-model - v-on" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code>- v-for - v-if / v-<span class="hljs-keyword">show</span> - <span class="hljs-keyword">id</span> - <span class="hljs-keyword">ref</span> / <span class="hljs-keyword">key</span> / slot - v-<span class="hljs-keyword">model</span> - v-<span class="hljs-keyword">on</span></code></pre> <blockquote><p>3.组件实例选项之间,建议加一个空格</p> <p>4.单文件组件,顶级元素的顺序</p> </blockquote> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<template><br /> <script></p> <style> <p>按照这个顺序组织代码就可以。注意style只能在最下面,script和template至少要有一个" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="xml"> <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="undefined"> 按照这个顺序组织代码就可以。注意style只能在最下面,script和template至少要有一个</span></span></code></pre> <h2 id="articleHeader5">4.优先级D的,需要慎用code style (推荐看文档)</h2> <ul> <li>如果一组 v-if + v-else 的元素类型相同,最好使用 key (比如两个 &lt;<a href="http://www.js-code.com/tag/div" title="div" target="_blank">div</a>&gt; 元素)。</li> </ul> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="默认情况下,Vue 会尽可能高效的更新 DOM。这意味着其在相同类型的元素之间切换时,会修补已存在的元素,而不是将旧的元素移除然后在同一位置添加一个新元素。如果本不相同的元素被识别为相同,则会出现意料之外的副作用。" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs"><code style="word-break: break-word; white-space: initial;">默认情况下,<a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a> 会尽可能高效的更新 <a href="http://www.js-code.com/tag/dom" title="浏览关于“DOM”的文章" target="_blank" class="tag_link">DOM</a>。这意味着其在相同类型的元素之间切换时,会修补已存在的元素,而不是将旧的元素移除然后在同一位置添加一个新元素。如果本不相同的元素被识别为相同,则会出现意料之外的副作用。</code></pre> <ul> <li>scoped 中的元素选择器</li> </ul> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="大量使用scoped里的元素 + 自定义属性选择器,性能会慢一些。 所以尽量用class" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs kotlin"><code>大量使用scoped里的元素 + 自定义属性选择器,性能会慢一些。 所以尽量用<span class="hljs-class"><span class="hljs-keyword">class</span></span></code></pre> <ul> <li>隐性的父子组件通信</li> </ul> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="应该优先通过 prop 和事件进行父子组件之间的通信,而不是 this.$parent 或改变 prop。" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs kotlin"><code style="word-break: break-word; white-space: initial;">应该优先通过 prop 和事件进行父子组件之间的通信,而不是 <span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>.$parent 或改变 prop。</code></pre> <ul> <li>非 Flux 的全局状态管理</li> </ul> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="没什么好说的,就是推荐用vuex,而不是eventbus,我觉得还是看具体情况" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs"><code style="word-break: break-word; white-space: initial;">没什么好说的,就是推荐用vuex,而不是eventbus,我觉得还是看具体情况</code></pre>

总结

以上是脚本宝典为你收集整理的

Vue官方推荐的风格指南

全部内容,希望文章能够帮你解决

Vue官方推荐的风格指南

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过