vue watch侦听器有无immediate的运行顺序

刚写项目的一个需求中遇到了watch运行顺序的坑，本打算把项目弄完再来看看，结果leader说产品还在改需求（高强度学习开始！！>_>）

watch普通监听属性（无immediate）

在初始化时不会执行watch

  created() {
    this.id = 1;
    console.log(this.id);
    console.log(this.name);
  },
  watch: {
    id: function (val) {
        if (val == 0) {
          this.name = "id等于0";
        } else if (val == 1) {
          this.name = "id等于1";
        }
        console.log(this.name, "这里是watch");
      },
  },

结果：

这里有个问题是第一次打印name的值为什么是‘初始值’而不是‘id等于1’。解决这个疑问就得谈到js事件处理的执行机制事件循环。在created中id=1触发watch侦听器，侦听器中函数进入事件queue，继续执行created，打印两个log，这里的name为初始值。created执行完后，执行事件queue中的watch侦听器的函数，给name赋值为‘id等于1’

immediate为true

添加immediate，在初始化时也会执行watch回调函数，组件加载立即执行。
要使用immediate需要添加handler属性

created() {
    this.id = 1;
    console.log(this.id);
    console.log(this.name);
  },
  watch: {
    id: {
      handler: function (val) {
        if (val == 0) {
          this.name = "id等于0";
        } else if (val == 1) {
          this.name = "id等于1";
        }
        console.log(this.name, "这里是watch");
      },
      immediate: true,
    },
  },

结果：

在组件加载完成时，立即执行watch回调函数，即在created前执行。
后面的执行顺序同无immediate时。

总结

学习前端时候觉得我啥都会了，结果前端全是细节。还有很多东西没学到，加油