#   
## Overview

In a Vue application, the #key# DOM: Data Object Model #key# update is always *asynchronous*. This means that after we've made changes to the value of Vue, the Vue queue takes some time to update and render the changes.

## What is `nextTick()`?

The **`nextTick()` method** allows us to execute code after we've changed some data and `Vue.JS` has updated the virtual DOM based on our data change, but before the browser has rendered that change on the page.

## When to use the `nextTick()` method

There are some cases when we need to update the rendered DOM after Vue has rendered it. These updates and rendering are performed very quickly, which is why we don't notice them, but we still have to wait for them to happen. In such cases, we can use the `nextTick()` method.

---

## Syntax

---
``` 
Vue.nextTick(function () {
  // code ...
})
```
---

- **`nextTick()`**: This accepts a callback function that gets delayed until the next DOM update cycle.

## Code

Let's understand how `nextTick` works with the help of code examples.

## Example 1: Without using `nextTick()`

The example given below includes two messages. These are `"First Message"` and `"Second Message"` and are stored in `data()` and `mounted()`, respectively.

The **`mounted()` function** is part of the [Instance LifeCycle Hooks](https://vuejs.org/guide/essentials/application.html). It is used after the element is mounted or rendered. This is why we see the `"Second Message"` as output instead of the message stored in `data()`.

The **`<template>` tag** is where we define our HTML elements as written below (`<p>`, `<button>`, `<div>`, etc).

Inside the **`<style>` tags**, we import the necessary CSS for our program.

#msg {
    font-size: 30px;
    font-family: "Avenir", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    margin-top: 40px;
    color: #2c3e50;
}

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
  render: h => h(App),
}).$mount('#app')

<template>
  <div id="msg"> {{ msg }} </div>
</template>

<script>
export default {
  data() {
    return { msg: "First Message", };
  },
  mounted() { this.msg = "Second message"; },
};
</script>

<style> @import './style.css'; </style>

import React from 'react';
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

import HelloWorld from './app';

var TestResult = function() {
    this.succeeded = false;
    this.reason = "";
    this.input = "";
    this.expected_output = "";
    this.actual_output = "";
}

export const executeTests = function() {

  var results = [];

  result = new TestResult();
  result.input = 'HelloWorld Component';
  result.expected_output = "span containing text 'Hello World'"

  let wrapper = shallow(<HelloWorld />);

  // Call your Challenge function here.

  let type = wrapper.type();
  let testSuccessful = true;
  let failureReason;

  if (type !== 'span') {
    testSuccessful = false;
    failureReason = "You need to render exactly one span HTML element";
  } else if (wrapper.props().children != "Hello World") {
     testSuccessful = false;
     failureReason = "You have rendered wrong message in your span element";
  }

  result.actual_output = wrapper.html();

  if (testSuccessful) {
    result.succeeded = true;
    result.reason = "Succeeded"
  } else {
    result.succeeded = false;
    result.reason = failureReason;
  }

  results.push(result);

  return results;
}


React

Dart

GoJS React

Typescript React

Vue.js

## Example 2: Using `nextTick()`

Now that we know that `mounted()` has rendered the element, we can use the `nextTick()` method to update the rendered DOM after Vue has rendered it.

We have a third message stored inside the function callback of `nextTick()`. Upon execution, we'll see the `"Third Message"` being displayed.

<template>
  <div id="msg"> {{ msg }} </div>
</template>

<script>
export default {
    data() {
    return { msg: "First Message", };
  },
  mounted() {
    // this won't print this time.
    this.msg = "Second message";

    this.$nextTick(() => {
      this.msg = "Third message";
    });
  },
};
</script>

<style> @import './style.css'; </style>

How to use the Vue.nextTick() method in Vue

Enables executing code post-data change but pre-render, aiding swift DOM updates via virtual DOM.

How to use the Vue.nextTick() method in Vue

Overview

What is nextTick()?

When to use the nextTick() method

Syntax

Code

Example 1: Without using nextTick()

Example 2: Using nextTick()

What is `nextTick()`?

When to use the `nextTick()` method

Example 1: Without using `nextTick()`

Example 2: Using `nextTick()`