Vue advanced tricks cheat sheet
Tags: vue, javascript
Published: 2020-03-12 00:37:34

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](https://qiita.com/_masa_u/items/6599546a7f3db2e2ffbc) Thanks to {% user masa_u %}

Enjoy!

# Table of content
* [Force re-rendering](#force-re-rendering)
* [Watching nested data](#watching-nested-data)
* [Custom components with v-model support](#custom-components-with v-model-support)
* [Functional component](#functional-component)

## Force re-rendering <a name="force-re-rendering"></a>

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:
```javascript
  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 <a name="watching-nested-data"></a>

Sometimes you might need to watch some nested data you can do this using dot notation:
```javascript
  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?

```javascript
  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 <a name="custom-components-with v-model-support"></a>

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:
```vue
<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 <a name="functional-component"></a>

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:
```vue
<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](https://vuejs.org/v2/guide/render-function.html#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.

Check out my free Node.js Essentials E-book here:

{% link https://dev.to/adnanbabakan/nodejs-essentials-free-e-book-5319 %}