Vue3+.net6.0 八 监听器 watch,回调
有时候我们需要根据变量的变化去更改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的。
可以通过设置监听器的属性,默认不用写这个属性。
flush: 'post'