Vue3+.net6.0 八监听器 watch，回调-526互联

有时候我们需要根据变量的变化去更改dom或者输出结果，也就是需要监听data部分，和Vue2一样，需要用到watch监听器。

简单例子，输入框绑定了context，当我们改变输入框的值时，watch里同名监听器context监听到了变化，通过判断新旧值是否有变化弹出提示。

需要注意的是：

　　1、监听器中的命名一定和data中的变量一样；

　　2、监听器默认参数就是新值和旧值，别整反了；

　　3、不需要oldVal时形参可以只写newVal。

<div id="appDiv" class="text-center">

    context:<input type="text" v-model="context" />
</div>

<script type="module">
    const { createApp } = Vue;
    const app = createApp({
        data() {
            return {
              context:'。。。。。。',
            }
        },
        watch:{
            context(newVal,oldVal)
            {
                if(newVal!=oldVal)
                {
                    alert('context已改变!');
                }
            }
        }
    });
    app.mount('#appDiv');
</script>

上例其实是简单写法，完整的写法其实是这样

简单写法中handler部分是直接写在监听器上的，大部分情况下都可以这么写，除非需要设置一些别的参数。

watch: {
    someObject: {
      handler(newValue, oldValue) {

      }
    }
  }

初始化时执行一次

有时候我们需要初始化时就进行一次回调操作，这时我们不用把代码复制到created或者mounted中，只要给watch的监听加上immediate: true 属性，默认情况下是false，不用写出来。

初始化执行是在created之前，此时data，computed，methods已经加载完成，可以在watch中使用了。

需要注意的是此时oldVal是undefind。

        watch: {
            context: {
                handler(newVal, oldVal) {
                    if (newVal != oldVal) {
                        alert('context已改变!');
                    }
                },
                immediate: true
            }
        }

回调触发的时机，在DOM改变后调用

有时候data中的变量会同时即绑定又监听还展示，这总有个顺序。

默认情况下监听器的回调是在DOM更新之前，也就是说如果这个变量的改变会操作dom的话，在监听器是获取不到改变后的DOM的。

可以通过设置监听器的属性，默认不用写这个属性。