vue $nextTick All In One

vue $nextTick All In One

API

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) // => '已更新'
      })
    }
  }
})

methods: {
  updateMessage: async function () {
    this.message = '已更新'
    console.log(this.$el.textContent) // => '未更新'
    await this.$nextTick()
    console.log(this.$el.textContent) // => '已更新'
  }
}

demo

if (this.isEdit || this.isCopyPush) {
    if (val.is_dynamic === 1) {
        // setTimeout(() => {
        //     this.setDynamicAdData();
        // }, 1000);
        // setTimeout(() => {
        //     this.setDynamicAdData();
        // }, 100);
        // setTimeout(() => {
        //     this.setDynamicAdData();
        // }, 0);
        this.$nextTick(function () {
            // DOM 更新了
            this.setDynamicAdData();
        });
        // this.$nextTick().then(function () {
        //     // DOM 更新了
        //     this.setDynamicAdData();
        // });
        // delay， 防止 DOM 没有渲染
        // this.setDynamicAdData();
    } else {
        this.setAdData();
    }
}

refs

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

---

---

©xgqfrms 2012-2020

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

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---