VueJs编程规范

好的编程习惯能够减少错误发生的概率，编码习惯好的人写出来的代码可读性好、可维护性高，规范编码风格习惯，降低团队之间的沟通成本。本文将介绍VueJS的编码规范

组件名为多个单词

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

// 错误
 Vue.component('html', {
      template: `
      <h2>{{ name }}</h2>
    `,
      data() {
        return {
          name: 'jack'
        }
      }
    })
// 正确
 Vue.component('k-html', {
      template: `
      <h2>{{ name }}</h2>
    `,
      data() {
        return {
          name: 'jack'
        }
      }
    })

当使用HTML元素作为组件名程序会报错

组件数据

组件的data必须是一个函数，当在组件中使用data属性的时候（除了new Vue以外的任何地方），它的值必须是返回一个对象函数。
当data的值是一个对象时，它会在这个组件的所有实例共享。

// 错误
 Vue.component('k-html', {
      template: `
      <h2>{{ name }}</h2>
    `,
      data: {
        name: 'jack'
      }
    })
// 正确
Vue.component('k-html', {
      template: `
      <h2>{{ name }}</h2>
    `,
      data() {
        return {
          name: 'jack'
       }
     }
  })

Prop定义

Prop定义应该尽量详细，在你提交的代码中，prop的定义应该尽量详细，至少需要指定其类型。好处有：

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

// 错误做法
Vue.component('k-html', {
      template: `
      <h2>{{ name }}</h2>
    `,
      props: ['age'],
      data() {
        return {
          name: 'jack'
        }
      }
    })
// 正确做法
 Vue.component('k-html', {
      template: `
      <h2>{{ name }}</h2>
    `,
      props: {
        age:{
          type:Number,
          require:true
        }
      },
      data() {
        return {
          name: 'jack'
       }
     }
  })

为v-for设置键值

总是用key配合v-for，以便维护内部组件及其子树状态。甚至在元素上维护可预测的行为。

// 错误
 <div id="app">
      <k-html :age="21"></k-html>
      <ul>
        <li v-for="(item) in list">{{ item.name }}</li>
      </ul>
  </div>
// 正确
 <div id="app">
      <k-html :age="21"></k-html>
      <ul>
        <li v-for="(item) in list" :key="item.id">{{ item.name }}</li>
      </ul>
 </div>

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

永远不要把v-if和v-for同时用在一个元素上，由于v-for比v-if的优先级要高，因为有可能存在，我先渲染了列表，但是此列表不满足展示的条件，因此不展示。

// 错误
      <ul>
        <li v-if="isShow" v-for="(item) in list" :key="item.id">{{ item.name }}</li>
      </ul>
// 正确
      <ul>
        <template v-if="isShow">
          <li v-for="(item) in list" :key="item.id">{{ item.name }}</li>
        </template>
      </ul>

为组件样式设置作用域

对于应用来说，顶级App组件和布局组件中的样式可以是全局的，但是其他所有组件都应该是有作用域的

<style scoped>
.cls {
  border: none;
  border-radius: 2px;
}
.btn-cls {
  background-color: red;
}
</style>

私有属性名

使用模块作用域保持不允许外部访问的函数的私有性。如果无法做到这一点，就始终为插件、混入等不考虑作为对外公共API的自定义私有属性使用$_前缀。并附带一个命名空间以回避和其他作者的冲突。

Vue使用_前缀来定义其自身私有属性，所以使用相同的前缀有覆写实例属性的风险。

    const app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!',
        isShow: true,
        list: [
          {
            id: 1,
            name: 'jack'
          },
          {
            id: 2,
            name: 'tom'
          },
          {
            id: 3,
            name: 'mary'
          }
        ]
      },
      methods: {
        $_k_update() {
          
        }
      },
    })