vue+ts 第八章(认识watchEffect高级侦听器)

watchEffect

立即执行传入的一个函数,同时响应式追踪其依赖,并在其依赖变更时重新运行该函数。

如果用到message 就只会监听message 就是用到几个监听几个 而且是非惰性 会默认调用一次

let message = ref<string>('')

let message2 = ref<string>('')

watchEffect(() => {

//console.log('message', message.value);

console.log('message2', message2.value);

})

清除副作用

就是在触发监听之前会调用一个函数可以处理你的逻辑例如防抖

import { watchEffect, ref } from 'vue'

let message = ref<string>('')

let message2 = ref<string>('')

watchEffect((oninvalidate) => {

//console.log('message', message.value);

oninvalidate(()=>{

})

console.log('message2', message2.value);

})

停止跟踪 watchEffect 返回一个函数 调用之后将停止更新

const stop = watchEffect((oninvalidate) => {

//console.log('message', message.value);

oninvalidate(()=>{

})

console.log('message2', message2.value);

},{

flush:"post",

onTrigger () {

}

})

stop()

更多的配置项

副作用刷新时机 flush 一般使用post
pre sync post
更新时机 组件更新前执行 强制效果始终同步触发 组件更新后执行

onTrigger 可以帮助我们调试 watchEffect

import { watchEffect, ref } from 'vue'
let message = ref<string>('')
let message2 = ref<string>('')
watchEffect((oninvalidate) => {
//console.log('message', message.value);
oninvalidate(()=>{
})
console.log('message2', message2.value);
},{
flush:"post",
onTrigger () {
}
})

相关推荐
stoneship13 分钟前
Web项目减少资源加载失败白屏问题
前端
DaMu42 分钟前
Cesium & Three.js 【移动端手游“户外大逃杀”】 还在“画页面的”前端开发小伙伴们,是时候该“在往前走一走”了!我们必须摆脱“画页面的”标签!
前端·gis
非专业程序员42 分钟前
一文读懂Font文件
前端
Asort44 分钟前
JavaScript 从零开始(七):函数编程入门——从定义到可重用代码的完整指南
前端·javascript
Johnny_FEer1 小时前
什么是 React 中的远程组件?
前端·react.js
真夜1 小时前
关于rngh手势与Slider组件手势与事件冲突解决问题记录
android·javascript·app
我是日安1 小时前
从零到一打造 Vue3 响应式系统 Day 10 - 为何 Effect 会被指数级触发?
前端·vue.js
知了一笑1 小时前
「AI」网站模版,效果如何?
前端·后端·产品
艾小码1 小时前
用了这么久React,你真的搞懂useEffect了吗?
前端·javascript·react.js