Common Mistakes in

(And, more importantly... how to avoid them)

ue.js

@danielkelly_io

@danielkellyio

Alabama, USA

Daniel Kelly

Lead Instructor @ Vue School

Full Stack developer (10 + years)

Husband and Father

presentation Icons from fontawesome.com

Why this topic

?

  • We're all human and make mistakes
  • Simple mistakes can cause big headaches
  • Learn from the mistakes of others
  • It's a very practical topic

Why this topic?

?

Mistake # 1

index as :key

<li 
  v-for="(item, index) in items" 
  :key="index"
>...</li>

What's wrong with this? πŸ€”

index as :key

<li 
  v-for="(item, index) in items" 
  :key="index"
>...</li>

What's wrong with this? πŸ€”

❌

index as :key

Bug Manifests Under 2 Conditions

  • When the elements in the array change order
  • When a nested element or component has it's own state

It's tricky!

Let's look at an example!

index as :key

It's not just for loops!

Let's look at an example!

Mistake # 2

Non-reactive value as dep

const cookiesAccepted = computed(()=> 
  localStorage.getItem("cookiesAccepted")
)

What's wrong with this? πŸ€”

Non-reactive value as dep

const cookiesAccepted = computed(()=> 
  localStorage.getItem("cookiesAccepted")
)

What's wrong with this? πŸ€”

const msg = "Hello world";
const cookiesAccepted = computed(()=> msg)

This is more obvious

Non-reactive value as dep

Often see this with browser API's:

  • localStorage
  • Date()
  • etc

Non-reactive value as dep

Reactive Deps

VueUse

Mistake # 3

Replacing Reactive State

let posts = reactive([
  'Post 1',
  'Post 2'
]);

function loadMore(){
  // fetch more posts, etc
  posts = newPosts;
}

What's wrong

with this? πŸ€”

Replacing Reactive State

let posts = reactive([
  'Post 1',
  'Post 2'
]);

function loadMore(){
  // fetch more posts, etc
  posts = newPosts;
}

What's wrong

with this? πŸ€”

πŸ‘ˆ replacing reactive

kills reactivity

Replacing Reactive State

Replacing Reactive State

Let's look at some examples!

Moral of the story:

just use ref() everywhere!

Oh and one more reason to use ref() everywhere

default watcher depth is different between ref() and reactive()

Let's see an example of that

Mistake # 4

Mutating Props

<script setup lang="ts">
defineProps<{
  modelValue: string;
}>();
</script>

<template>
  <input id="username" v-model="modelValue" />
</template>

What's wrong with this? πŸ€”

Mutating Props

<script setup lang="ts">
defineProps<{
  modelValue: string;
}>();
</script>

<template>
  <input id="username" v-model="modelValue" />
</template>

What's wrong with this? πŸ€”

Mutating a prop

Let's look at some examples!

Common Vue.js Mistakes and How to Avoid Them

πŸ”₯ Free

https://vueschool.io/courses/common-vue-js-mistakes-and-how-to-avoid-them

Β 

  • Omitting the Key Directive on v-for
  • Prop Drilling
  • Watching Arrays the Wrong Way
  • Replacing Reactive State the Wrong Way
  • Unintentionally Mutating Props
  • Forgetting to Clean Up Your Manual Event Listeners
  • Expecting Changes to Non-Reactive Dependencies to Trigger Updates
  • Not Considering TypeScript
  • Destructuring Reactive Data
  • Calling Composables in the Wrong Place
  • Using v-html with User Provided Data
  • Unnecessary Manual DOM Manipulation

Β 

πŸ‘ˆ

πŸ‘ˆ

πŸ‘ˆ

πŸ‘ˆ

Grab Some Swag πŸ€—

But before I go!

vue.school/masterclass

Not just crappy multiple choice questions

Β πŸ‘‰ you gotta code to pass

83% say the exam is moderate to difficult

74% say it actually helped improve their Vue.js skills

danielkelly_io

I'll tweet out the slides and the codebase after this

Thank you πŸ™

Go code awesome things!

(with Vue πŸ˜‰)

Common Mistakes in Vue.js and How to Avoid Them

By Daniel Kelly

Common Mistakes in Vue.js and How to Avoid Them

  • 484