建行官方网站登录,发广告平台有哪些,广州办营业执照,中小企业网站建设 论文该文章是在学习 小满vue3 课程的随堂记录示例均采用 script setup#xff0c;且包含 typescript 的基础用法 前言
Vue3 中新增了一种特殊的监听器 watchEffect#xff0c;它的类型是#xff1a;
function watchEffect(effect: (onCleanup: OnCleanup) void,o… 该文章是在学习 小满vue3 课程的随堂记录示例均采用 script setup且包含 typescript 的基础用法 前言
Vue3 中新增了一种特殊的监听器 watchEffect它的类型是
function watchEffect(effect: (onCleanup: OnCleanup) void,options?: WatchEffectOptions
): StopHandle下面通过实例来理解下它的用法
一、简单使用
第一个参数就是要运行的 副作用函数 effect函数内 用到哪些数据 才会 监听哪些数据且会 立刻执行一次immediate
input typetext v-modelmessage1 /
br /
input typetext v-modelmessage2 /
br /import { ref, watchEffect } from vue;const message1 refstring(飞机);
const message2 refstring(火车);watchEffect(() {console.log(message1,, message1);// 不使用 message2 就不会监听 message2// console.log(message2,, message2);
});二、副作用 effect 的参数
effect 的参数 也是一个 函数用来 注册清理回调。清理回调 会在 该副作用下一次执行前被调用可以用来清理无效的副作用例如等待中的异步请求
input typetext v-modelmessage1 /
br /
input typetext v-modelmessage2 /
br /import { ref, watchEffect } from vue;const message1 refstring(飞机);
const message2 refstring(火车);watchEffect((onCleanup) {console.log(message11111,, message1);console.log(message22222,, message2);onCleanup(() {console.log(onCleanup —————— 下一次运行之前要做的事);});
});页面刷新首次打印 更改输入框的值再次打印 三、watchEffect 返回值
返回值是一个用来 停止侦听器 的函数调用后不再侦听需要注意的是停止时不影响最后一次 onCleanup 的执行
input typetext v-modelmessage1 /
br /
input typetext v-modelmessage2 /
br /
button clickstopWatch停止watchEffect/buttonconst stop watchEffect((onCleanup) {console.log(message11111,, message1);console.log(message22222,, message2);onCleanup(() {console.log(onCleanup —————— 下一次运行之前要做的事);});
});const stopWatch () {stop();
};页面刷新首次打印 更改输入框的值再次打印 点击按钮 停止侦听再次打印 四、options配置
watchEffect 的第二个参数是配置项
flushwatch 的执行顺序 pre | post | sync 默认pre具体含义可以看上一篇 watch 中的解释一般需要在 dom 更新之后再获取的情况可以设置为 post onTrack 用于开发环境调试onTrigger 用于开发环境调试
input idipt v-modeliptVal /const iptVal refstring(aa);watchEffect(() {// 测试 flushconst spanEle document.getElementById(ipt);// flush pre 时打印 null; flush post 时打印节点console.log(spanEle,, spanEle); // 修改 iptVal 测试 onTrack、onTriggerconsole.log(iptVal, iptVal.value);},{flush: post,// 收集依赖时触发onTrack: () {debugger;},// 更新时触发onTrigger: () {debugger;},}
);五、周边 api
watchPostEffect()watchEffect() 使用 flush: post 选项时的别名watchSyncEffect()watchEffect() 使用 flush: sync 选项时的别名
