从源码里了解vue中的nextTick的使用

<template>  .....  <pop ref="pop" :name="name"/></template><script>export default {  .....  created() {    ....    // 请求数据，并从接口获取数据    Data.get({      url: xxxx,      success: (data) => {        // 问题出现在这里，我们赋值以后直接调用show方法，去展现，show方法调用的同时上报数据，而上报的数据这个时候还未更新到子组件        this.name = data.name        this.$refs.pop.show()      }    })  }}</script>

<template>  <div v-show="isShow">    ......  </div></template><script>export default {  .....  props: ['name'],  methods: {    show() {      this.isShow = true      // 上报      Report('xxx', {name: this.name})    }  }}</script>

this.name = data.namesetTimeout(() => { this.$refs.pop.show()})

this.name = data.namethis.$nextTick(() => { this.$refs.pop.show()})

/** * Defer a task to execute it asynchronously. */export const nextTick = (function () { const callbacks = [] let pending = false let timerFunc function nextTickHandler () {  pending = false  const copies = callbacks.slice(0)  callbacks.length = 0  for (let i = 0; i < copies.length; i++) {   copies[i]()  } } // the nextTick behavior leverages the microtask queue, which can be accessed // via either native Promise.then or MutationObserver. // MutationObserver has wider support, however it is seriously bugged in // UIWebView in iOS >= 9.3.3 when triggered in touch event handlers. It // completely stops working after triggering a few times... so, if native // Promise is available, we will use it: /* istanbul ignore if */ if (typeof Promise !== 'undefined' && isNative(Promise)) {  var p = Promise.resolve()  var logError = err => { console.error(err) }  timerFunc = () => {   p.then(nextTickHandler).catch(logError)   // in problematic UIWebViews, Promise.then doesn't completely break, but   // it can get stuck in a weird state where callbacks are pushed into the   // microtask queue but the queue isn't being flushed, until the browser   // needs to do some other work, e.g. handle a timer. Therefore we can   // "force" the microtask queue to be flushed by adding an empty timer.   if (isIOS) setTimeout(noop)  } } else if (!isIE && typeof MutationObserver !== 'undefined' && (  isNative(MutationObserver) ||  // PhantomJS and iOS 7.x  MutationObserver.toString() === '[object MutationObserverConstructor]' )) {  // use MutationObserver where native Promise is not available,  // e.g. PhantomJS, iOS7, Android 4.4  var counter = 1  var observer = new MutationObserver(nextTickHandler)  var textNode = document.createTextNode(String(counter))  observer.observe(textNode, {   characterData: true  })  timerFunc = () => {   counter = (counter + 1) % 2   textNode.data = String(counter)  } } else {  // fallback to setTimeout  /* istanbul ignore next */  timerFunc = () => {   setTimeout(nextTickHandler, 0)  } } return function queueNextTick (cb?: Function, ctx?: Object) {  let _resolve  callbacks.push(() => {   if (cb) {    try {     cb.call(ctx)    } catch (e) {     handleError(e, ctx, 'nextTick')    }   } else if (_resolve) {    _resolve(ctx)   }  })  if (!pending) {   pending = true   timerFunc()  }  if (!cb && typeof Promise !== 'undefined') {   return new Promise((resolve, reject) => {    _resolve = resolve   })  } }})()

new Vue({   el: '#app',   data() {    return {     id: 2    }   },   created() {       },   mounted() {    this.$nextTick(() => {     console.log(document.getElementById('id').textContent) // 这里打印出来的是2，因为先调用了nextTick    })    this.id = 3   } })