Categories
Vue Best Practices

Vue Best Practices — Templates and Variables

Spread the love

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.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *