JavaScript Event Loop机制详解与Vue.js中nextTick的实践应用

})

vm.message = 'new message' // 更改数据

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

Vue.nextTick(function () {

vm.$el.textContent === 'new message' // true

})

在组件内应用 vm.$nextTick() 实例办法特别便利，因为它不须要全局 Vue ，并且回调函数中的 this 将主动绑定到当前的 Vue 实例上：

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

src/core/util/env

/** 
 
* 应用 MicroTask 来异步履行批次义务 
 
*/ 
 
export const nextTick = (function() { 
 
  // 须要履行的回调列表 
 
  const callbacks = []; 
 
  
 
  // 是否处于挂起状况 
 
  let pending = false; 
 
  
 
  // 时光函数句柄 
 
  let timerFunc; 
 
  
 
  // 履行并且清空所有的回调列表 	
			 6/9   首页 上一页 4 5 6 7 8 9 下一页 尾页	
			

　　推荐阅读
　　借力大数据技术 证券行业迎转型契机
            51CTO诚邀您9月23号和秒拍/国美/美团元专家一路聊智能CDN的优化之路，抓紧时光哦！
            互联网+时代，证券行业制订大年夜数据计谋急切而合时。一方面，近年来大年夜数据被晋升到国度成长计谋层>>>详细阅读


本文标题：JavaScript Event Loop机制详解与Vue.js中nextTick的实践应用
地址：http://www.17bianji.com/lsqh/37333.html
 1/2    1