watch和watchEffect都是监听器，但在写法和使用上有所区别。 watch在监听 ref 类型时和监听Reactive类型时watch函数的写发有所不一样。watch在监听
watch和watchEffect都是监听器，但在写法和使用上有所区别。
watch在监听 ref 类型时和监听Reactive类型时watch函数的写发有所不一样。
watch在监听 ref 类型时：
<script>
import {ref, watch} from 'Vue'
export default {
setup() {
const state = ref(0)
watch(state, (newValue, oldValue) => {
console.log(`原值为${oldValue}`)
console.log(`新值为${newValue}`)
})
// 1秒后将state值+1
setTimeout(() => {
state.value ++
}, 1000)
}
}
</script>watch在监听 reactive类型时：
<script>
import {reactive, watch} from 'vue'
export default {
setup() {
const state = reactive({count: 0})
watch(() => state.count, (newValue, oldValue) => {
console.log(`原值为${oldValue}`)
console.log(`新值为${newValue}`)
})
// 1秒后将state.count的值+1
setTimeout(() => {
state.count ++
}, 1000)
}
}
</script>watchEffect 它与 watch 的区别主要有以下几点：
<script>
import {reactive, watchEffect} from 'vue'
export default {
setup() {
const state = reactive({ count: 0, name: 'zs' })
watchEffect(() => {
console.log(state.count)
console.log(state.name)
})
setTimeout(() => {
state.count ++
state.name = 'ls'
}, 1000)
}
}
</script>根据以上特征，我们可以自行选择使用哪一个监听器
另：watch和watchEffect监听器在同一个页面中都可以使用多次，对于分别监听多个变量的时候
到此这篇关于vue3中watch和watchEffect的用法详解的文章就介绍到这了,更多相关VUE3 watch和watchEffect内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
--结束END--
本文标题: VUE3中watch和watchEffect的用法详解
本文链接: https://www.lsjlt.com/news/138203.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0