<template>
  <div class="next_tick">
      <div ref="title" class="title">{{name}}</div>
  </div>
</template>
<script>
export default {
    data() {
        return {
            name: '前端南玖'
        }
    },
    mounted() {
        this.name = 'front end'
        console.log('sync',this.$refs.title.innerText)
        this.$nextTick(() => {
            console.log('nextTick',this.$refs.title.innerText)
        })
    }
}
</script>

mounted() {
  this.name = 'front end'
  console.log('sync',this.$refs.title.innerText)
  Promise.resolve().then(() => {
    console.log('微任務',this.$refs.title.innerText)
  })
  setTimeout(() => {
    console.log('宏任務',this.$refs.title.innerText)
  }, 0)
  this.$nextTick(() => {
    console.log('nextTick',this.$refs.title.innerText)
  })
}

<template>
  <div class="next_tick">
      <div ref="title" class="title">{{name}}</div>
      <div class="verse">{{verse}}</div>
  </div>
</template>

<script>
export default {
    name: 'nextTick',
    data() {
        return {
            name: '前端南玖',
            verse: '如若東山能再起，大鵬展翅上九霄',
            count:0
        }
    },
    mounted() {
        this.name = 'front end'
        this.verse = '世間萬物都是空，功名利祿似如風'
        // console.log('sync',this.$refs.title.innerText)
        // Promise.resolve().then(() => {
        //     console.log('微任務',this.$refs.title.innerText)
        // })
        // setTimeout(() => {
        //     console.log('宏任務',this.$refs.title.innerText)
        // }, 0)
        // this.$nextTick(() => {
        //     console.log('nextTick',this.$refs.title.innerText)
        // })
    },
    updated() {
        this.count++
        console.log('update:',this.count)
    }
?
}
</script>
<style lang="less">
.verse{
    font-size: (20/@rem);
}
</style>

mounted() {
  this.name = 'front end'
  this.verse = '世間萬物都是空，功名利祿似如風'
  Promise.resolve().then(() => {
    this.name = 'study ...'
  })
  setTimeout(() => {
    this.verse = '半身風雨半身寒，一杯濁酒敬流年'
  })
  // console.log('sync',this.$refs.title.innerText)
  // Promise.resolve().then(() => {
  //     console.log('微任務',this.$refs.title.innerText)
  // })
  // setTimeout(() => {
  //     console.log('宏任務',this.$refs.title.innerText)
  // }, 0)
  // this.$nextTick(() => {
  //     console.log('nextTick',this.$refs.title.innerText)
  // })
},
  updated() {
    this.count++
    console.log('update:',this.count)
  }

// watcher.js
// 當依賴發(fā)生變化時，觸發(fā)更新
update() {
  if(this.lazy) {
    // 懶執(zhí)行會走這里, 比如computed
    this.dirty = true
  }else if(this.sync) {
    // 同步執(zhí)行會走這里，比如this.$watch() 或watch選項，傳遞一個sync配置{sync: true}
    this.run()
  }else {
    // 將當前watcher放入watcher隊列， 一般都是走這里
    queueWatcher(this)
  }
}

// scheduler.js
/*將一個觀察者對象push進觀察者隊列，在隊列中已經(jīng)存在相同的id則該觀察者對象將被跳過，除非它是在隊列被刷新時推送*/
export function queueWatcher (watcher: Watcher) {
  /*獲取watcher的id*/
  const id = watcher.id
  /*檢驗id是否存在，已經(jīng)存在則直接跳過，不存在則標記在has中，用于下次檢驗*/
  if (has[id] == null) {
    has[id] = true
    // 如果flushing為false， 表示當前watcher隊列沒有在被刷新，則watcher直接進入隊列
    if (!flushing) {
      queue.push(watcher)
    } else {
      // 如果watcher隊列已經(jīng)在被刷新了，這時候想要插入新的watcher就需要特殊處理
      // 保證新入隊的watcher刷新仍然是有序的
      let i = queue.length - 1
      while (i >= 0 && queue[i].id > watcher.id) {
        i--
      }
      queue.splice(Math.max(i, index) + 1, 0, watcher)
    }
    // queue the flush
    if (!waiting) {
      // wating為false，表示當前瀏覽器的異步任務隊列中沒有flushSchedulerQueue函數(shù)
      waiting = true
      // 這就是我們常見的this.$nextTick
      nextTick(flushSchedulerQueue)
    }
  }
}

// next-tick.js
const callbacks = []
let pending = false
?
// 批處理
function flushCallbacks () {
  pending = false
  const copies = callbacks.slice(0)
  callbacks.length = 0
  // 依次執(zhí)行nextTick的方法
  for (let i = 0; i < copies.length; i++) {
    copies[i]()
  }
}
?
export function nextTick (cb, ctx) {
  let _resolve
  callbacks.push(() => {
    if (cb) {
      try {
        cb.call(ctx)
      } catch (e) {
        handleError(e, ctx, 'nextTick')
      }
    } else if (_resolve) {
      _resolve(ctx)
    }
  })
  // 因為內(nèi)部會調(diào)nextTick，用戶也會調(diào)nextTick，但異步只需要一次
  if (!pending) {
    pending = true
    timerFunc()
  }
  // 執(zhí)行完會會返回一個promise實例，這也是為什么$nextTick可以調(diào)用then方法的原因
  if (!cb && typeof Promise !== 'undefined') {
    return new Promise(resolve => {
      _resolve = resolve
    })
  }
}

// timerFunc 
// promise.then -> MutationObserver -> setImmediate -> setTimeout
// vue3 中不再做兼容性處理，直接使用的就是promise.then 任性
?
if (typeof Promise !== 'undefined' && isNative(Promise)) {
  const p = Promise.resolve()
  timerFunc = () => {
    p.then(flushCallbacks)
    if (isIOS) setTimeout(noop)
  }
  isUsingMicroTask = true
} else if (!isIE && typeof MutationObserver !== 'undefined' && (
  isNative(MutationObserver) ||
  // PhantomJS and iOS 7.x
  MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {
  let counter = 1
  const observer = new MutationObserver(flushCallbacks) // 可以監(jiān)聽DOM變化，監(jiān)聽完是異步更新的
  // 但這里并不是想用它做DOM監(jiān)聽，而是利用它是微任務這一特點
  const textNode = document.createTextNode(String(counter))
  observer.observe(textNode, {
    characterData: true
  })
  timerFunc = () => {
    counter = (counter + 1) % 2
    textNode.data = String(counter)
  }
  isUsingMicroTask = true
} else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
  timerFunc = () => {
    setImmediate(flushCallbacks)
  }
} else {
  // Fallback to setTimeout.
  timerFunc = () => {
    setTimeout(flushCallbacks, 0)
  }
}

export function renderMixin (Vue) {
  // install runtime convenience helpers
  installRenderHelpers(Vue.prototype)

  Vue.prototype.$nextTick = function (fn) {
    return nextTick(fn, this)
  }
  
  Vue.prototype._render = function() {
    //...
  }
  // ...
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="title">欲試人間煙火，怎料世道滄桑</div>
    <script>
        title.innerText = '萬卷詩書無一用，半老雄心剩疏狂'
        console.log('updated',title)
    </script>
</body>
</html>