Vue Watch 的原理 和 $nextTick() 通俗理解

網上watch和$nextTick()解釋比較複雜，涉及到promise，h5的dom發生變化的新api等複雜代碼，下列就是兩個參考。
【watch原理】
【$nextTick()】

首先，看遇到問題代碼：

<template>
  <div>
    <button @click="changeList">我要變成童話裏大灰狼，嘿嘿！</button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      isfirst: true,
      num: 0
    };
  },
  watch: {
    'num': function (val) {
      if (val > 0 && this.isfirst) {
        console.log('我改變了'); // 是不會之執行的
      }
      console.log('我又改變了'); // 只會執行之一段
    }
  },
  methods: {
    changeList () {
      this.num += 1;
      this.isfirst = false;
    }
  }
}
</script>

簡單用watch的原理實現上述代碼，以下：

// es6
class Parent () {
    // ...
    get num () {
        return this.val;
    }
    set num (val) {
        this.val = val;
        // watch 原始把回調放在這裏
        isfirst && cb(); // 步驟1
    }
    // ...
}
// es5的寫法
defindeProperty(new Parent(), 'num', {
    get: () => this.val,
    set (val) {
        this.val = val;
        // watch 原始把回調放在這裏
        isfirst && cb(); // 步驟1
    }
});


const parent = new Parent();
parent.num = 2;
isfirst = false; // 步驟2

先執行步驟1，還步驟2？答案是步驟 2。我想要的就結果是步驟1執行完，在執行步驟2。

vue提供vm.$nextTick(fn(){})。

methods: {
  changeList () {
    this.num += 1;
    this.$next(()=> {
        this.isfirst = false;
    });
  }
}