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 async Function for Computed Properties
The functions we use for computed properties should be synchronous.
If we use async functions, unexpected behavior may occur.
If we ned computed properties to be async, then we can use plugins to use them.
For instance, we should write:
<template>
<div id="app"></div>
</template>
<script>
export default {
name: "App",
computed: {
reversedMsg() {
return this.msg
.split("")
.reverse()
.join("");
}
},
data() {
return { msg: "foo" };
}
};
</script>
No Duplicate Keys in Field Names
We shouldn’t have duplicate field names in our component object.
This applies to the whole object. So we shouldn’t have the same name in methods or data for example.
Instead of writing:
<template>
<div id="app"></div>
</template>
<script>
export default {
name: "App",
computed: {
foo() {
return 'bar'
}
},
data() {
return { foo: "foo" };
}
};
</script>
We should write:
<template>
<div id="app"></div>
</template>
<script>
export default {
name: "App",
computed: {
foo() {
return "bar";
}
},
data() {
return { bar: "foo" };
}
};
</script>
No Duplicate Attributes
We shouldn’t have duplicate attributes in our templates.
For instance, instead of writing:
<template>
<div id="app">
<div :id="id"></div>
<div id="id"></div>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
id: "id"
};
}
};
</script>
We write:
<template>
<div id="app">
<div :id="id"></div>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
id: "id"
};
}
};
</script>
Don’t Overwrite Reserved Keys
We shouldn’t write keys that have the same names as reserved keys.
For instance, we shouldn’t write:
<template>
<div id="app"></div>
</template>
<script>
export default {
name: "App",
props: {
$el: String
}
};
</script>
We have an $el prop, which is a reserved key.
We shouldn’t have that so we won’t get unexpected results.
No Shared Component State
The data property should have a function instead of the object as its value.
If we have an object, then the state will be shared.
Therefore, instead of writing:
<template>
<div id="app"></div>
</template>
<script>
export default {
name: "App",
data: {
foo: "bar";
}
};
</script>
We should write:
<template>
<div id="app"></div>
</template>
<script>
export default {
name: "App",
data() {
return {
foo: "bar"
};
}
};
</script>
No Side Effects in Computed Properties
We shouldn’t have side effects inside computed property functions.
It makes the code hard to understand and unpredictable.
For instance, instead of writing:
<template>
<div id="app"></div>
</template>
<script>
export default {
name: "App",
computed: {
foo() {
window.foo = `foo ${this.baz}`;
return `foo ${this.baz}`;
}
},
data() {
return {
baz: "bar"
};
}
};
</script>
We should write:
<template>
<div id="app"></div>
</template>
<script>
export default {
name: "App",
computed: {
foo() {
return `foo ${this.baz}`;
}
},
data() {
return {
baz: "bar"
};
}
};
</script>
All we do is return something based on the fields in data .
No key Attribute in template
The template element shouldn’t have the key attribute.
For instance, instead of writing:
<template key='app'>
<div id="app"></div>
</template>
<script>
export default {
name: "App"
};
</script>
We write:
<template>
<div id="app"></div>
</template>
<script>
export default {
name: "App"
};
</script>
No Mustache in textarea
We should never put a mustache expression between the textarea tags.
Instead, we should use the v-model directive.
This way, get a 2-way binding between our model field and the input value.
For instance, instead of writing:
<template >
<div id="app">
<textarea>{{ message }}</textarea>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
message: "foo"
};
}
};
</script>
We should write:
<template >
<div id="app">
<textarea v-model="message">{</textarea>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
message: "foo"
};
}
};
</script>
Conclusion
There are many ways to make mistakes when writing Vue apps.
We should never commit side effects in computed properties.
Also, our component should never expose its state to the outside.
Reserved keys should also never be keys of anything in our component object.
We should use v-model with textarea elements to get a 2-way binding between our model field and the input value.
