网站优化哪里可以做,网站做网络营销,微信网址,无锡网站制作专业服务公司watch
watch 用于侦听特定的响应式数据源#xff08;如数据、计算属性等#xff09;#xff0c;比如ref或者是reactive时#xff0c;并在其变化时执行回调函数。它适合用于处理副作用#xff0c;如 API 请求或异步操作。使用 watch 适合特定数据变化的侦听#xff0c;提…watch
watch 用于侦听特定的响应式数据源如数据、计算属性等比如ref或者是reactive时并在其变化时执行回调函数。它适合用于处理副作用如 API 请求或异步操作。使用 watch 适合特定数据变化的侦听提供更细粒度的控制。
import { ref, watch } from vue;
const count ref(0);
//watch第一个参数是侦听的数据源
// 第二个参数是一个回调函数 (){},该回调函数有2个参数一个是新值另外一个旧值。
// 如果想侦听多可以使用数组 watch([,,],(newValue, oldValue){}),数组中有几个元素就会出现几组newValue和oldValue
// 也可以监听对象但是需要用到第三个参数watch(数据源,(new,old){},{deep: true}) 深度侦听。 而且如果是引用类型监听到新值和旧值是一样的
//ref中需要起开deep,reactive不需要自动会开启deep
//如果只想侦听某个对象的某个属性可以将属性转化为对象如()message.foo.bar.name将他作为侦听源。
//watch 第四个参数immediate默认的是false,开启后只要运行就输出一次即使没有发生改变。
// 第五个参数flush 默认的是pre. 是组件更新之前调用值为sync 同步执行值为post 组件更新之后执行。
watch(count, (newValue, oldValue) {console.log(Count changed from ${oldValue} to ${newValue});
});watchEffect
watchEffect 用于自动追踪其内部使用的响应式状态。它适合用于需要依赖多个数据源的场景并会在任何相关数据变化时重新运行。使用 watchEffect 更方便适用于动态依赖的场景可以自动追踪相关数据。
import { ref, watchEffect } from vue;const count ref(0);
const doubleCount ref(0);// watchEffect 接收一个回调函数 (){}, 把侦听的值直接放里面就可以。
// 参数可以接受一个回调函数在监听之前做一些事。
// 还可以停止监听watchEffect返回值是一个函数直接调用就可以停止监听。
watchEffect(() {doubleCount.value count.value * 2;console.log(Double count is now: ${doubleCount.value});
});实例
templatedivinput v-modelmessage typetext / brinput v-modelmessage2 typetext /br/div
/template
script setup langts
import { ref,reactive, watchEffect } from vue
let message refstring(大飞机)
let message2 refstring(小飞机)
watchEffect((oninvalidate){// 它是非惰性的一进入页面先给调用一次。console.log(message,message.value)console.log(message2,message2.value)oninvalidate((){console.log(执行之前可以进行一些操作)})
})
/script停止监听
templatedivinput v-modelmessage typetext / brbutton clickstopWatch停止监听/button/div
/template
script setup langts
import { ref,reactive, watchEffect } from vue
let message refstring(大飞机)
const stop watchEffect((oninvalidate){console.log(message,message.value)oninvalidate((){console.log(执行之前可以进行一些操作)})
})
const stopWatch () stop()
/script更多配置项副作用刷新时机flush, 有三个可选值一般为 post
post: 组件更新后执行pre: 组件更新前执行sync: 强制效果始终同步触发
templatedivinput idipt v-modelmessage typetext / brbutton clickstopWatch停止监听/button/div
/template
script setup langts
import { ref,reactive, watchEffect } from vue
let message refstring(大飞机)
const stop watchEffect((oninvalidate){//提示可能为null,我们来个断言不能将类型“HTMLInputElement | null”分配给类型“HTMLInputElement”。let ipt:HTMLInputElement document.querySelector(#ipt) as HTMLInputElement//console.log(message,message.value)console.log(ipt,eeeeeeeeeeee)oninvalidate((){console.log(执行之前可以进行一些操作)})
},{//flush属性有三个选项post,pre,syncflush:post,// 开发环境帮我们调试程序onTrigger(e){debugger}
})
const stopWatch () stop()
/script
