Vue is an easy front end framework to work with. It lets us create apps easily.
However, there are still many things that we should look out for when we write apps with them.
In this article, we’ll look at some essential rules that we should follow when we’re building our Vue apps.
No Unused Components
We shouldn’t have unused components lying around in our project.
So instead of writing:
<template >
<div id="app"></div>
</template>
<script>
import HelloWorld from "./components/HelloWorld";
export default {
name: "App",
components: {
HelloWorld
}
};
</script>
We should write:
<template >
<div id="app">
<HelloWorld/>
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld";
export default {
name: "App",
components: {
HelloWorld
}
};
</script>
No Unused Variable Definitions in v-for
When we define a v-for
loop, we should use all the variables that are defined.
For instance, instead of writing:
<template >
<div id="app">
<ol v-for="i in 5">
<li>foo</li>
</ol>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
We should write:
<template >
<div id="app">
<ol v-for="i in 5">
<li>{{ i }}</li>
</ol>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
Don’t Use v-if and v-for Together
v-for
and v-if
shouldn’t be used together since it’s slower than using computed properties.
We should use competed properties to render fewer items rather than using v-if
to check if each item should be rendered.
For instance, instead of writing:
<template >
<div id="app">
<ul v-for="a in arr" v-if="a % 2 === 0" :key="a">
<li>{{ a }}</li>
</ul>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
arr: [1, 2, 3, 4, 5]
};
}
};
</script>
We write:
<template>
<div id="app">
<ul v-for="a in evenNums" :key="a">
<li>{{ a }}</li>
</ul>
</div>
</template>
<script>
export default {
name: "App",
computed: {
evenNums() {
return this.arr.filter(a => a % 2 === 0);
}
},
data() {
return {
arr: [1, 2, 3, 4, 5]
};
}
};
</script>
Add the is Prop to the Component component
To display components dynamically, we’ve to use the component
component to display items.
The is
prop sets the name of the com[onent to display.
For instance, instead of writing:
<template >
<div id="app">
<component/>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
We write:
<template >
<div id="app">
<component :is="name"></component>
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld";
export default {
components: {
HelloWorld
},
name: "App",
data() {
return {
name: "HelloWorld"
};
}
};
</script>
Prop Types Should be a Constructor
We should put constructors as the values of the props
property to make sure that they’re an instance of some constructor.
For instance, instead of writing:
<template >
<div id="app"></div>
</template>
<script>
export default {
name: "App",
props: {
name: "String"
}
};
</script>
We should write:
<template >
<div id="app"></div>
</template>
<script>
export default {
name: "App",
props: {
name: String
}
};
</script>
It can also be an array if our prop can more than one type:
<template >
<div id="app"></div>
</template>
<script>
export default {
name: "App",
props: {
name: [String]
}
};
</script>
A Render Function Should Return Something
A render function should return something that we want to render.
For instance, instead of writing:
Vue.component("hello", {
render(createElement) {
if (Math.random() < 0.5) {
return createElement("div", "hello");
}
}
});
We should write:
Vue.component("hello", {
render(createElement) {
return createElement("div", "hello");
}
});
We make sure that a render function always returns something.
Add a key Prop to Items Rendered by v-for
We need the key
prop to anything that’s rendered by v-for
so that Vue can keep track of it properly.
For instance, we should write:
<template >
<div id="app">
<div v-for="a in 5">{{a}}</div>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
We write:
<template >
<div id="app">
<div v-for="a in 5" :key="a">{{a}}</div>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
Now Vue can keep track of the rendered items properly.
Conclusion
We should make sure that we have a key
prop added to whatever is rendered by v-for
.
Unused components should be removed from our code.
Render functions should always return something to render.
And prop types should be a constructor. Otherwise, the prop type check won’t work.