Here are additional good and bad practices for Vue.js:
General Coding Standards
-
Avoid Magic Numbers and Strings:
- Use constants for values that are used repeatedly or have special meaning.
// Good
const MAX_ITEMS = 10;
function addItem(item) {
if (items.length < MAX_ITEMS) {
items.push(item);
}
}
// Bad
function addItem(item) {
if (items.length < 10) {
items.push(item);
}
}
-
Use
v-for
Efficiently:- When using
v-for
, always provide a uniquekey
to optimize rendering.
- When using
<!-- Good -->
<div v-for="item in items" :key="item.id">
{{ item.name }}
</div>
<!-- Bad -->
<div v-for="item in items">
{{ item.name }}
</div>
-
Avoid Inline Styles:
- Prefer using CSS classes over inline styles for better maintainability.
<!-- Good -->
<div class="item">{{ item.name }}</div>
<style scoped>
.item {
color: red;
}
</style>
<!-- Bad -->
<div :style="{ color: 'red' }">{{ item.name }}</div>
Component Practices
-
Component Reusability:
- Design components to be reusable and configurable through props.
// Good
<BaseButton :label="buttonLabel" :disabled="isDisabled" @click="handleClick" />
// Bad
<button :disabled="isDisabled" @click="handleClick">{{ buttonLabel }}</button>
-
Prop Validation:
- Always validate props using type and required attributes.
// Good
props: {
title: {
type: String,
required: true
},
age: {
type: Number,
default: 0
}
}
// Bad
props: {
title: String,
age: Number
}
-
Avoid Long Methods:
- Break down long methods into smaller, more manageable methods.
// Good
methods: {
fetchData() {
this.fetchUserData();
this.fetchPostsData();
},
async fetchUserData() { ... },
async fetchPostsData() { ... }
}
// Bad
methods: {
async fetchData() {
const userResponse = await fetch('api/user');
this.user = await userResponse.json();
const postsResponse = await fetch('api/posts');
this.posts = await postsResponse.json();
}
}
-
Avoid Computed Properties with Side Effects:
- Computed properties should be used for pure computations and not for side effects.
// Good
computed: {
fullName() {
return `${this.firstName} ${this.lastName}`;
}
}
// Bad
computed: {
fetchData() {
// Side effect: fetch data inside a computed property
this.fetchUserData();
return this.user;
}
}
Template Practices
-
Use
v-show
vsv-if
:- Use
v-show
for toggling visibility without adding/removing elements from the DOM, andv-if
when conditionally rendering elements.
- Use
<!-- Good: Use v-show for toggling visibility -->
<div v-show="isVisible">Content</div>
<!-- Good: Use v-if for conditional rendering -->
<div v-if="isLoaded">Content</div>
<!-- Bad: Use v-if for simple visibility toggling -->
<div v-if="isVisible">Content</div>
-
Avoid Large Templates:
- Keep templates clean and small; break them into smaller components if they become too large.
<!-- Good: Small, focused template -->
<template>
<div>
<BaseHeader />
<BaseContent />
<BaseFooter />
</div>
</template>
<!-- Bad: Large, monolithic template -->
<template>
<div>
<header>...</header>
<main>...</main>
<footer>...</footer>
</div>
</template>
State Management Practices
-
Use Vuex for State Management:
- Use Vuex for managing complex state across multiple components.
// Good
// store.js
export default new Vuex.Store({
state: { user: {} },
mutations: {
setUser(state, user) {
state.user = user;
}
},
actions: {
async fetchUser({ commit }) {
const user = await fetchUserData();
commit('setUser', user);
}
}
});
-
Avoid Direct State Mutation in Components:
- Use mutations to modify Vuex state rather than directly mutating state in components.
// Good
methods: {
updateUser() {
this.$store.commit('setUser', newUser);
}
}
// Bad
methods: {
updateUser() {
this.$store.state.user = newUser; // Direct mutation
}
}
Error Handling and Debugging
-
Global Error Handling:
- Use Vue’s global error handler for catching and handling errors.
Vue.config.errorHandler = function (err, vm, info) {
console.error('Vue error:', err);
};
-
Provide User Feedback:
- Provide clear feedback to users when an error occurs.
// Good
methods: {
async fetchData() {
try {
const data = await fetchData();
this.data = data;
} catch (error) {
this.errorMessage = 'Failed to load data. Please try again.';
}
}
}
// Bad
methods: {
async fetchData() {
try {
this.data = await fetchData();
} catch (error) {
console.error('Error fetching data:', error);
}
}
}
By adhering to these additional practices, you can further enhance the quality, maintainability, and efficiency of your Vue.js applications.
Top comments (0)