Let’s understand vue.next

  • Update data asynchronously
  • Why do you need nextTick?
  • What are the usage scenarios of nextTick?

Update data asynchronously

First of all, it is clear that the response data update of a point Vue is asynchronous, and there are some boundary cases in asynchronous:

Vue’s responsive data has not yet updated the DOM structure due to async, but we access the DOM structure data, causing us to access the previous DOM data, which is not the desired boundary case. But sometimes we do need to manipulate the DOM directly to get data. This is where vue.nexttick Api processing comes into play.

Why do you need nextTick

Asynchronous updates of data and direct DOM access

Usage scenarios

The created() hook function doesn’t render the DOM yet, so you can’t create the DOM directly. $nextTick() ¶

2. After updating the data, you want to use JS to operate on the new view.

$nextTick() is used to reapply the plugin’s methods when using third-party plug-ins that require dynamic DOM changes.

<template> <div> <span id="ab">{{message}}</span> < button@click ="next">next</button> </div> </template> <script> export default { name: 'NextTick', data() { return { message: '123' } }, methods: { next() { this.message = 'new message'; Log (this.message) var ab = document.getelementById ('ab') console.log(ab.innerhtml === 'new message') // false this.$nextTick(function () { console.log(ab.innerHTML === 'new message') // true }) } } } </script> <style lang="scss" scoped> </style>Copy the code