vue3代码规范

Vue3 推荐遵循的代码规范包括：

1. 组件样式封装：使用 <style scoped> 来确保样式只作用于当前组件，避免影响全局。

<template>
  <!-- 组件内容 -->
</template>
 
<script>
export default {
  // 组件逻辑
}
</script>
 
<style scoped>
/* 仅作用于当前组件的样式 */
</style>

2. 组件命名：使用驼峰命名法（PascalCase），并确保组件的文件名与组件名一致。

// MyComponent.vue
<template>
  <!-- 组件内容 -->
</template>
 
<script>
export default {
  name: 'MyComponent'
  // 组件逻辑
}
</script>

3. 组件属性命名：使用驼峰命名法，并在模板中使用短横线命名（kebab-case）。

<template>
  <my-component my-prop="value"></my-component>
</template>
 
<script>
export default {
  props: {
    myProp: {
      type: String,
      required: true
    }
  }
  // 组件逻辑
}
</script>

4. 组件方法使用 camelCase：在 <script> 标签内部，方法名应该使用 camelCase 风格。

<script>
export default {
  methods: {
    updateData() {
      // 方法逻辑
    }
  }
}
</script>

5. 组件数据使用 camelCase：组件的 data 函数返回的对象的键也应该使用 camelCase。

<script>
export default {
  data() {
    return {
      myData: null
    };
  }
}
</script>

6. 计算属性使用 camelCase：计算属性名也应该使用 camelCase。

<script>
export default {
  computed: {
    reversedMessage() {
      // 计算属性逻辑
    }
  }
}
</script>

遵循这些规范可以使得 Vue 项目代码更加清晰、易于维护。