What is the difference between vue instruction and $nextTick to operate DOM?

This article introduces you to the article about what is the difference between vue instructions and $nextTick to operate DOM? It has a good reference value and I hope it can help anyone in need. friend.

Asynchronous update queue

Maybe you haven’t noticed yet, Vue performs DOM updates asynchronously. As soon as data changes are observed, Vue will open a queue and buffer all data changes that occur in the same event loop. If the same watcher is triggered multiple times, it will only be pushed into the queue once. This deduplication during buffering is important to avoid unnecessary calculations and DOM operations. Then, on the next event loop "tick", Vue flushes the queue and performs the actual (deduplicated) work. Vue internally tries to use native Promise.then and MessageChannel for asynchronous queues. If the execution environment does not support it, setTimeout(fn, 0) will be used instead.

For example, when you set vm.someData = 'new value' , the component will not re-render immediately. When the queue is flushed, the component is updated on the next "tick" when the event loop queue is cleared. Most of the time we don't need to worry about this process, but if you want to do something after the DOM state is updated, it can be a bit tricky. While Vue.js generally encourages developers to think in a "data-driven" way and avoid touching the DOM directly, there are times when we really need to do that. To wait for Vue to finish updating the DOM after the data changes, you can use Vue.nextTick(callback) immediately after the data changes. This callback function will be called after the DOM update is completed. For example:

<p id="example">{{message}}</p>
var vm = new Vue({
  el: '#example',
  data: {
    message: '123'
  }
})
vm.message = 'new message' // 更改数据
vm.$el.textContent === 'new message' // false
Vue.nextTick(function () {
  vm.$el.textContent === 'new message' // true
})

It is particularly convenient to use the vm.$nextTick() instance method within a component because it does not require global Vue, and this in the callback function will be automatically bound to the current Vue instance:

Vue.component('example', {
  template: '<span>{{ message }}</span>',
  data: function () {
    return {
      message: '没有更新'
    }
  },
  methods: {
    updateMessage: function () {
      this.message = '更新完成'
      console.log(this.$el.textContent) // => '没有更新'
      this.$nextTick(function () {
        console.log(this.$el.textContent) // => '更新完成'
      })
    }
  }
})

vue directive

Hook function

A directive definition object can provide the following hook functions (Both are optional):

bind: Called only once, when the directive is bound to an element for the first time. One-time initialization settings can be performed here.

inserted: Called when the bound element is inserted into the parent node (only the parent node is guaranteed to exist, but not necessarily inserted into the document).

update: Called when the VNode of the component is updated, but may occur before its child VNode is updated. The value of the directive may or may not have changed. But you can ignore unnecessary template updates by comparing the values ​​before and after the update (see below for detailed hook function parameters).

componentUpdated: Called after all the VNode of the component where the instruction is located and its sub-VNodes have been updated.

unbind: Called only once, when the instruction is unbound from the element.

Parameters of the hook function (i.e. el, binding, vnode and oldVnode).

It should be noted that the document may not have been inserted into the DOM during update, but componentUpdated means that the document has been inserted into the DOM. Moreover, the triggering conditions of the so-called "update" hook function are very broad and difficult to control. For example, updates of other adjacent nodes that are not related to the node will cause the reflow of its layout, which will also cause the hook function to trigger

Therefore, if you want to operate the DOM after the data is updated, use the update command , componentUpdated needs to be cautious, you can consider using nextTick

Recommended related articles:

Summary of the method of packaging the Vue project by environment

v-model implementation principle What is it? Introduction to how to use v-model (with code)

The above is the detailed content of What is the difference between vue instruction and $nextTick to operate DOM?. For more information, please follow other related articles on the PHP Chinese website!