Vue3中watchEffect高级侦听器的具体使用
作者：Unique·Blue
Vue3中新增了一种特殊的监听器watchEffect,本文主要介绍了Vue3中watchEffect高级侦听器的具体使用,具有一定的参考价值,感兴趣的可以了解一下
示例均采用 <script setup>，且包含 typescript 的基础用法
前言
Vue3 中新增了一种特殊的监听器 watchEffect，它的类型是：
function watchEffect( effect: (onCleanup: OnCleanup) => void, options?: WatchEffectOptions ): StopHandle
下面通过实例来理解下它的用法
一、简单使用
- 第一个参数就是要运行的
副作用函数 effect - 函数内
用到哪些数据才会监听哪些数据 - 且会
立刻执行一次（immediate）
<input type="text" v-model="message1" /> <br /> <input type="text" v-model="message2" /> <br />
import { ref, watchEffect } from "vue";
const message1 = ref<string>("飞机");
const message2 = ref<string>("火车");
watchEffect(() => {
console.log("message1========>,", message1);
// 不使用 message2 就不会监听 message2
// console.log("message2========>,", message2);
});
二、副作用 effect 的参数
- effect 的参数 也是一个
函数，用来注册清理回调。 清理回调会在该副作用下一次执行前被调用，可以用来清理无效的副作用，例如等待中的异步请求
<input type="text" v-model="message1" /> <br /> <input type="text" v-model="message2" /> <br />
import { ref, watchEffect } from "vue";
const message1 = ref<string>("飞机");
const message2 = ref<string>("火车");
watchEffect((onCleanup) => {
console.log("message11111========>,", message1);
console.log("message22222========>,", message2);
onCleanup(() => {
console.log("onCleanup —————— 下一次运行之前要做的事");
});
});
页面刷新，首次打印：
更改输入框的值，再次打印：
三、watchEffect 返回值
- 返回值是一个用来
停止侦听器的函数，调用后不再侦听 - 需要注意的是：停止时，
不影响最后一次 onCleanup 的执行
<input type="text" v-model="message1" /> <br /> <input type="text" v-model="message2" /> <br /> <button @click="stopWatch">停止watchEffect</button>
const stop = watchEffect((onCleanup) => {
console.log("message11111========>,", message1);
console.log("message22222========>,", message2);
onCleanup(() => {
console.log("onCleanup —————— 下一次运行之前要做的事");
});
});
const stopWatch = () => {
stop();
};
页面刷新，首次打印：
更改输入框的值，再次打印：
点击按钮 停止侦听，再次打印：
四、options配置
watchEffect 的第二个参数是配置项：
flush：watch 的执行顺序pre|post|sync，默认：pre，具体含义可以看上一篇 watch 中的解释- 一般需要在 dom 更新之后再获取的情况，可以设置为
post
onTrack用于开发环境调试onTrigger用于开发环境调试
<input id="ipt" v-model="iptVal" />
const iptVal = ref<string>("aa");
watchEffect(
() => {
// 测试 flush
const spanEle = document.getElementById("ipt");
// flush = pre 时，打印 null; flush = post 时，打印节点
console.log("spanEle========>,", spanEle);
// 修改 iptVal 测试 onTrack、onTrigger
console.log("iptVal============>", iptVal.value);
},
{
flush: "post",
// 收集依赖时触发
onTrack: () => {
debugger;
},
// 更新时触发
onTrigger: () => {
debugger;
},
}
);
五、周边 api
watchPostEffect()：watchEffect()使用flush: 'post'选项时的别名watchSyncEffect()：watchEffect()使用flush: 'sync'选项时的别名
到此这篇关于Vue3中watchEffect高级侦听器的具体使用的文章就介绍到这了,更多相关Vue3 watchEffect高级侦听器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！