Vue.js Bootcamp

# Best Practices

Some of the Vue.js best practices topics we'll be covering in this section:

  1. Components
  2. Templates
  3. Routing
  4. Vuex

# Other Best pratices:

# Performance

You have to set:

Vue.config.performance = true;

Also consider to use:

# Error handling

Use:

Vue.config.errorHandler;

Use:

  • errorCaptured hook.

Set:

# Computed Properties

Split complex computed properties into as many simpler properties:

  • Easier to test.
  • Easier to read.
  • More manageable.

# Component Data

  • Define data props upfront to make them reactive.
data() {
	return {
		isLoading: true,
		commitSha: null,
		diffViewType: 'inline',
		isParallelView: false,
		diffFiles: [],
		author: {
			username: ''
		}

	}
}

  • Avoid manipulating the DOM directly.

  • No need to put static data in Vue data object.

Bad

<template>
	<div id="app">
		<img alt="Vue logo" :src="logo" />
		<HelloWorld msg="Welcome to Your Vue.js App" />
	</div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';
import image from './assets/logo.png';

export default {
	name: 'App',
	components: {
		HelloWorld
	},
	data() {
		return {
			logo: image
		};
	}
};
</script>

There's no need to define a property in Data to directly modify the DOM.

Good

<template>
	<div id="app">
		<img alt="Vue logo" :src="logo" />
		<HelloWorld msg="Welcome to Your Vue.js App" />
	</div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';
import image from './assets/logo.png';

export default {
	name: 'App',
	components: {
		HelloWorld
	},
	computed: {
		logo() {
			return image;
		}
	}
};
</script>

Instead of declaring static props inside the data property, just declare a computed property to manipulate the DOM.

# Conditional Rendering

Directive Description
v-if Higher toggle cost
v-show Higher initial render cost

← Components →