loading...
Cover image for Vue advanced tricks cheat sheet

Vue advanced tricks cheat sheet

adnanbabakan profile image Adnan Babakan (he/him) Updated on ・3 min read

Vue cheat sheet (4 Part Series)

1) Vue cheat sheet 1 2) Vue cheat sheet 2 3) Vue cheat sheet 3 (advanced) 4) Vue advanced tricks cheat sheet

Hey there DEV.to community!

Since I'm usually involved with Vue, I encounter many problems to solve and believe me there is no better feeling than solving a long-time-irritating problem for a developer! xD

So here I'm sharing with you some of those tricks I used to overcome some problems and it might be useful for you as well at some point.

There is a Japanese version of this article available at https://qiita.com/_masa_u/items/6599546a7f3db2e2ffbc Thanks to

masa_u image

Enjoy!

Table of content

Force re-rendering

In some cases, it is necessary to force Vue in order to re-render your component since it won't track some changes.

There are some ways of doing so, such as using the v-if hack, but the correct way is by using forceUpdate method:

  export default {
    methods: {
      forceUpdateMyComponent() {
        this.$forceUpdate()
      },
    },
  }

Keep that in mind that $ is necessary to use this method in your Vue instance.
And you better be notified that this won't update any computed property but only force the view of your component to be re-rendered.

Watching nested data

Sometimes you might need to watch some nested data you can do this using dot notation:

  export default {
    data() {
      return {
        myInfo: {
          firstName: 'Adnan'
        }
      }
    },
    watch: {
      'myInfo.firstName'() {
        console.log('Here');
      }
    }
  }

The code above is when you know which property inside your object to watch!
But what if you want to watch your whole object and also its values?

  export default {
    data() {
      return {
        myFruits: {apple: 'red', banana: 'yellow'},
      }
    },
    methods: {
      changeIt() {
        this.myFruits.apple = 'green'
      },
    },
    watch: {
      myFruits: {
        deep: true,
        handler() {
          console.log('Fruits updated!')
        },
      },
    },
  }

You can define your watch not as a function immediately but as an object, then by using the deep key and the value true watch your object and put what you want to be fired when the data got changed inside a function called handler.

Custom components with v-model support

As you know v-model is used to make a two-way binding with an input element/component and a data property.

If you are making a custom component and want it to support v-model you can emit the input keyword and in order to receive what is passed to your component initially with the v-model you simply need to get a prop called value.

For an easier comprehension check the code below:

<template>
    <div>
        <label>My custom test input: <input :value="inputValue" @input="emitTheData" /></label>
    </div>
</template>

<script>
  export default {
    props: ['value'],
    data() {
      return {
        inputValue: value
      }
    },
    methods: {
      emitTheData() {
        this.$emit('input', this.inputValue)
      }
    }
  }
</script>

This simple component will bind the data passed to it in two directions.

Note: As you can see, I assigned the prop called value to a data called inputValue and used it in my input, you might think that I could pass the prop directly to my input but as Vue suggests it is better not to alter props directly.

Functional component

Imagine having a component with no watch or computed property and no methods! You would only use it to render some other components as one with some props. If it is so then why waste Vue's time when there are no lifecycle methods?

A functional component can be defined as below:

<template functional>
  <div>{{ props.foo }}</div>
</template>

Note: Keep in mind that there is no this context in these components since it is a functional component!

You can check the link below for more information about functional components in Vue:
Vue functional components


Let me know if any other tricks you use in order to make your Vue app faster or your development pace more rapid and I'll add them here.

Vue cheat sheet (4 Part Series)

1) Vue cheat sheet 1 2) Vue cheat sheet 2 3) Vue cheat sheet 3 (advanced) 4) Vue advanced tricks cheat sheet

Posted on Jan 2 by:

adnanbabakan profile

Adnan Babakan (he/him)

@adnanbabakan

I'm Adnan Babakan and I'm from Iran. I started programming since I was 8 and now I'm 19. I love programming!

Discussion

markdown guide
 

To force render you can also specify a key attribute (even if outside of a loop). If the key changes, the component renders again.

 

One of my favourite tricks (not out of the box) is a simple uid generator for keys.

function uid(e) {
  if (e.uid) return e.uid;

  const key = Math.random()
    .toString(16)
    .slice(2);

  this.$set(e, "uid", key);

  return e.uid;
}

this will add a random uid key to each object in the loop and reuse it when it already exists.

Fiddle: jsfiddle.net/jamesbrndwgn/j2dtkun6/5/

 

Deep watching is a nice touch, I didn't know about the object and passing in deep. Thanks

 
 

Uow, I didnt know the functional components trick. Nice.

 

Nice! Glad you know it now. XD