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

Posted 2020-11-19 liangcheng11

网上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;
    });
  }
}