【vue3】vue3 setup如何使用watch?
setup是一个组件选项,在组件被创建之前,props 被解析之后执行。它是组合式 API 的入口。他接受两个参数:{Data} props{SetupContext} context在setup选项里使用watch有两种办法。第一种:使用watchEffect,watchEffect立即执行传入的一个函数,同时响应式追踪其依赖,并在其依赖变更时重新运行该函数。示例:<script lang
·
setup
是一个组件选项,在组件被创建之前,props
被解析之后执行。它是组合式 API 的入口。
他接受两个参数:
{Data} props
{SetupContext} context
在setup
选项里使用watch
有两种办法。
第一种:使用watchEffect
,watchEffect
立即执行传入的一个函数,同时响应式追踪其依赖,并在其依赖变更时重新运行该函数,可以接收watchEffect
的返回值用来停止监听。
示例:
<script lang="ts">
import { ref,watchEffect } from 'vue'
export default {
setup(){
const message = ref("hello")
const changeMessage = ()=> message.value = "hello world"
watchEffect((onInvalidate)=>{
//使用这个函数的时候会执行一次里边的代码,因为这里打印了message.value
//message是ref响应式变量
//所以后续检测到message值的变化,就会再次执行effect里边的代码
console.log("message 被修改了",message.value)
//如果是下边这种情况,没有message.value
//那么只会在注册effect的时候执行一次,后续不再执行
// console.log("这次没有message被修改了")
onInvalidate(()=>{
//当组件失效,watchEffect被主动停止或者副作用即将重新执行时,这个函数会执行
})
},{
flush: 'post',//在组件更新后触发,这样你就可以访问更新的 DOM。
// flush: 'pre',//默认值,在组件更新前触发
// flush: 'sync',//同步触发,低效
})
// const stop = watchEffect();
//stop() 可以停止监听
return {
message,
changeMessage
}
}
}
</script>
<template>
<div>
{{message}}
<button @click="changeMessage">修改message</button>
</div>
</template>
第二种:watch
,watch API
与选项式 API this.$watch
(以及相应的 watch
选项) 完全等效。watch
需要侦听特定的数据源,并在单独的回调函数中执行副作用。默认情况下,它也是惰性的——即回调仅在侦听源发生变化时被调用。
示例:
<script lang="ts">
import { ref,watch } from 'vue'
export default {
setup(){
const message = ref("hello")
const changeMessage = ()=> message.value = "hello world"
watch(
()=>message.value,
(val,preVal)=>{
//val为修改后的值,preVal为修改前的值
console.log("message",val,preVal)
},
{
//如果加了这个参数,值为true的话,就消除了惰性,watch会在创建后立即执行一次
//那么首次执行,val为默认值,preVal为undefined
immediate:true,
//这个参数代表监听对象时,可以监听深度嵌套的对象属性
//比如message是一个对象的话,可以监听到message.a.b.c,也就是message下的所有属性
deep:true,
}
)
return {
message,
changeMessage
}
}
}
</script>
<template>
<div>
{{message}}
<button @click="changeMessage">修改message</button>
</div>
</template>
watch
还可以同时监听多个源,用数组传入。
示例:
<script lang="ts">
import { ref,watch } from 'vue'
export default {
setup(){
const message = ref("hello")
const count = ref(0)
const changeMessage = ()=> {
message.value = "hello world"
count.value = 666
}
watch(
()=>[message.value,count.value],
([messageVal,messagePreVal],[countVal,countPreVal])=>{
//监听多个源用数组传入
console.log("messageVal,messagePreVal",messageVal,messagePreVal)
console.log("countVal,countPreVal",countVal,countPreVal)
},
)
return {
message,
changeMessage
}
}
}
</script>
<template>
<div>
{{message}}
<button @click="changeMessage">修改message</button>
</div>
</template>
有帮助的话,点个赞呗!关于vue3的一切疑问,大家可以在评论区留言提问。
更多推荐
已为社区贡献8条内容
所有评论(0)