Vue开发规范

Posted 2023-04-09 igoodful

###############################

单文件组件内容：

<!--componentA.vue-->
<script>/*...*/</script>
<template>...</template>
<style>/*...*/</style>

 

 

 

组件相关：

尽可能的减少watcher的数量

尽量减少组件嵌套，递归渲染影响性能

大量数据渲染导致卡顿，可以先渲染用户可见部分，后面滚动在渲染其他数据

 

推荐用单文件的方式组织组件，利于提高单个组件的编辑查阅效率，即使不使用构建工具，也可以变通的使用单文件组件开发方式。

 

组件命名规则：

组件命名应使用完整单词。原因：避免歧义。

组件名必须为多个单词。原因：避免与未来的HTML元素冲突，配合框架或规范约束第一条理解。

• 基础组件加特定前缀预示复用性，例如Base；
• 单例组件用The前缀标识预示唯一性；TheHeading.vue，TheSidebar.vue
• 耦合组件中的子组件使用父组件名做前缀预示耦合关系，例如TodoList和TodoListItem；
• 相关组件命名用一般性描述单词开头，用修饰性单词结尾，例如ColorPicker、ColorPickerMulti、ColorPickerQuery。SearchButtonClear.vue，SearchButtonRun.vue

1.组件的 data 属性的值必须是返回一个对象的函数；

   原因：如果直接用一个数据对象，则组件的多个实例之间会产生数据污染，导致失去复用价值。

2.组件的Prop在声明时推荐使用PascalCase(驼峰式)，但在模板中必须使用kebab-case(连字符式)；

  原因：HTML对大小写不敏感。

组件的Prop 定义应该尽量详细，至少要定义类型，利于开发期间调试和提高组件代码可读性。

通过props和事件进行父子组件之间通信,不可使用this.$parent或改变prop。避免隐性的父子组件通信

区分vuex和props的使用边界：业务组件使用vuex维护状态,方便组件之间通信；通用组件使用props以及事件进行父子组件通信,与业务解耦. 在通用组件中定义props尽可能详细,指定类型

 

在除了DOM模板以外的任何地方使用自闭和组件写法，使代码更简洁，例如<my-component/>。

组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或方法，因为计算属性和方法利于复用和重构，而且模板也会看起来也更清晰易懂。

为列表渲染设置属性key。切忌使用下标作为key，会失去虚拟Dom对比的优化

v-for必须配合key使用；

  原因：可以提高部分情况下Vue的渲染性能。

<div v-for = \'item in items\' :key = \'item.id\'>
<!--内容-->
</div>

 

在v-if/v-if-else/v-else 中使用key，添加key,对比虚拟Dom时会认为是不同的节点,将旧元素直接移除并在相同位置添加新元素

<div v-if = \'error\' key = \'search-status\'>
error
</div>
<div v-else key = \'search-results\'>
results
</div>

 

 

 

指令缩写要么一直用要么一直不用，提高模板可读性。指令缩写保持统一 ,用:表示v-bind,@表示v-on

避免v-if和v-for一起使用

 

 

scoped 样式中避免使用元素选择器；

  原因：遍历元素的效率通常很低

组件样式必须设置作用域，避免样式冲突，单文件组件可以选择使用scope特性，通用组件可以选择基于class的规则，例如BEM。

为组件样式设置作用域，通过scoped特性或者css Modules设置样式作用域,组件库使用class策略,使用容易理解的class名称且没有太高的选择器优先级,不容易导致冲突，拥有多个特性的元素应该分多行撰写，每个特性一行。

 

 

为所有路由统一添加query：上级路由携带的query参数,需要在所有路由中携带,且不影响切换

解决方案：

使用全局守卫beforeEach

// 缺点 全局守卫beforeEach会执行两次,且每次切换路由都会切换两次
const query = refer: \'test\'
router.beforeEach((to,from,next)=>
    to.query.referer ? next() : next(...to,query,...query)
)

使用函数劫持,推荐使用

const query = refer: \'test\';
const transitionTo = router.history.transitionTo
  
router.history.transitionTo = function(location,onComplete,onAbout)
    location = typeof location === \'object\' ? ...location,query:...location.query,...query : path:location,query
    transitionTo.call(router.history,location,onComplete,onAbout)

 

路由切换组件不变。路由的params参数改变不会重新触发组件的生命周期

解决方案

• 路由导航守卫beforeRouteUpdate,拉取数据重新渲染视图,vue-router2.2+支持,推荐使用,

• 观察$route对象的变化,添加watch,增加依赖追踪的内存开销

// good
const User = 
    template:\'...\',
    watch:
        \'$route.query.id\'(to,from)
            //....
        ,
        \'$route.query.page\'(to,from)
            //....
        
 
    
 

 

为router-view组件添加属性key,利用虚拟dom渲染通过key对比节点的原理,不足之处在于切换路由组件会被销毁并重新创建

<router-view :key = \'$route.fullPath\'></router-view>

 

 

#####################

[e-mail]

Web前端-vue 开发命名规范

1、views 命名

views 文件夹下面是由 以页面为单位的 vue 文件 或者 模块文件夹 组成的

放在 src 目录之下，与 components、assets 同级

目录解析

目录/文件	说明
build	项目构建(webpack)相关代码
config	配置目录，包括端口号等。我们初学可以使用默认的。
node_modules	npm 加载的项目依赖模块
src	这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件： assets: 放置一些图片，如logo等。 components: 目录里面放了一个组件文件，可以不用。 App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。 main.js: 项目的核心文件。
static	静态资源目录，如图片、字体等。
test	初始测试目录，可删除
.xxxx文件	这些是一些配置文件，包括语法配置，git配置等。
index.html	首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
package.json	项目配置文件。
README.md	项目的说明文档，markdown 格式

打开 APP.vue 文件，代码如下（解释在注释中）：

src/APP.vue

<!-- 展示模板 -->
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <hello></hello>
  </div>
</template>
 
<script>
// 导入组件
import Hello from './components/Hello'
 
export default {
  name: 'app',
  components: {
    Hello
  }
}
</script>
<!-- 样式代码 -->
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

2、views 下的文件夹命名

（1）views 下面的文件夹代表着模块的名字

（2）由名词组成（car、order、cart）

（3）单词只能有一个（good: car order cart）（bad: carInfo carpage）

（4）尽量是名词（good: car）（bad: greet good）

（5）以小写开头（good: car）（bad: Car）

3、views 下的 vue 文件命名

（1）views 下面的 vue 文件代表着页面的名字

（2）放在模块文件夹之下

（3）只有一个文件的情况下不会出现文件夹，而是直接放在 views 目录下面，如 Login Home

（4）尽量是名词

（5）大写开头，开头的单词就是所属模块名字（CarDetail、CarEdit、CarList）

（6）名字至少两个单词（good: CarDetail）（bad: Car）

（7）常用结尾单词有（Detail、Edit、List、Info、Report）

（8）以 Item 结尾的代表着组件（CarListItem、CarInfoItem）

4、vue 方法命名

vue 方法放置顺序

（1）components

（2）props

（3）data

（4）created

（5）mounted

（6）activited

（7）update

（8）beforeRouteUpdate

（9）metods

（10）filter

（11）computed

（12）watch

5、method 自定义方法命名

（1）动宾短语（good：jumpPage、openCarInfoDialog）（bad：go、nextPage、show、open、login）

（2）ajax 方法以 get、post 开头，以 data 结尾（good：getListData、postFormData）（bad：takeData、confirmData、getList、postForm）

（3）事件方法以 on 开头（onTypeChange、onUsernameInput）

（4）init、refresh 单词除外

（5）尽量使用常用单词开头（set、get、open、close、jump）

（6）驼峰命名（good: getListData）（bad: get_list_data、getlistData）

6、data props 方法注意点

（1）使用 data 里的变量时请先在 data 里面初始化

（2）props 指定类型，也就是 type

（3）props 改变父组件数据 基础类型用 $emit ，复杂类型直接改

（4）ajax 请求数据用上 isLoading、isError 变量

（5）不命名多余数据，现在是详情页、你的数据是 ajax 请求的，那就直接声明一个对象叫 d，而不是每个字段都声明

（6）表单数据请包裹一层 form

7、生命周期方法注意点

（1）不在 mounted、created 之类的方法写逻辑，取 ajax 数据，

（2）在 created 里面监听 Bus 事件