vue & nextTick

vue & nextTick

Vue.nextTick

Vue.nextTick( [callback, context] )

https://vuejs.org/v2/api/#Vue-nextTick

https://cn.vuejs.org/v2/api/index.html#Vue-nextTick

在下次 DOM 更新循环结束之后执行延迟回调。
在修改数据之后立即使用这个方法，获取更新后的 DOM。

// 修改数据
vm.msg = 'Hello';

// DOM 还没有更新
Vue.nextTick(function () {
  // DOM 更新了
})

// 作为一个 Promise 使用 (2.1.0 起新增，详见接下来的提示)
Vue.nextTick().then(function () {
    // DOM 更新了
  })

2.1.0 起新增：
如果没有提供回调且在支持 Promise 的环境中，则返回一个 Promise。
请注意 Vue 不自带 Promise 的 polyfill，所以如果你的目标浏览器不原生支持 Promise (IE：你们都看我干嘛)，你得自己提供 polyfill。

异步更新队列

https://cn.vuejs.org/v2/guide/reactivity.html#异步更新队列

https://vuejs.org/v2/guide/reactivity.html#Async-Update-Queue

<div id="example">{{ message }}</div>

// Vue.nextTick(callback)

var vm = new Vue({
  el: '#example',
  data: {
    message: '123'
  }
})

vm.message = 'new message' ;
// change data

vm.$el.textContent === 'new message' ;
// false

Vue.nextTick(function () {
  vm.$el.textContent === 'new message';
   // true
})

// vm.$nextTick()

Vue.component('example', {
  template: '<span>{{ message }}</span>',
  data: function () {
    return {
      message: 'not updated'
    }
  },
  methods: {
    updateMessage: function () {
      this.message = 'updated'
      console.log(this.$el.textContent);
      // => 'not updated'
      this.$nextTick(function () {
        console.log(this.$el.textContent);
        // => 'updated'
      })
    }
  }
})

// async/await syntax:

methods: {
  updateMessage: async function () {
    this.message = 'updated'
    console.log(this.$el.textContent);
    // => 'not updated'
    await this.$nextTick()
    console.log(this.$el.textContent);
    // => 'updated'
  }
}

vm.$nextTick

vm.$nextTick( [callback] )

https://vuejs.org/v2/api/#vm-nextTick

https://cn.vuejs.org/v2/api/index.html#vm-nextTick

将回调延迟到下次 DOM 更新循环之后执行。
在修改数据之后立即使用它，然后等待 DOM 更新。
它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。

New in 2.1.0+: returns a Promise if no callback is provided and Promise is supported in the execution environment.

Please note that Vue does not come with a Promise polyfill, so if you target browsers that don’t support Promises natively (looking at you, IE), you will have to provide a polyfill yourself.

new Vue({
  // ...
  methods: {
    // ...
    example: function () {
      // modify data
      this.message = 'changed'
      // DOM is not updated yet
      this.$nextTick(function () {
        // DOM is now updated
        // `this` is bound to the current instance
        this.doSomethingElse()
      })
    }
  }
})

mounted hook

ready replaced by mounted

DOM ready

https://vuejs.org/v2/guide/migration.html#ready-replaced

// Vue.nextTick/vm.$nextTick 

mounted: function () {
  this.$nextTick(function () {
    // code that assumes this.$el is in-document
  })
}

// Vue.nextTick/vm.$nextTick

mounted: function () {
  this.$nextTick(function () {
    // 代码保证 this.$el 在 document 中
  })
}

refs

https://www.raymondcamden.com/2019/02/22/what-is-nexttick-in-vue-and-when-you-need-it

nextTick允许您在更改数据之后，VueJS根据您的数据更改，但在浏览器将更改内容呈现在页面上之前，更新DOM。

https://stackoverflow.com/questions/47634258/what-is-nexttick-or-what-does-it-do-in-vuejs

setTimeout(fn, 0)

https://stackoverflow.com/questions/779379/why-is-settimeoutfn-0-sometimes-useful

---

---

©xgqfrms 2012-2025

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---