2025年VUE3中watch和watchEffect的用法

科技前沿 • 2025-03-23 21:03 • 阅读 38

大家好，我是讯享网，很高兴认识大家。

watch和watchEffect都是监听器，但在写法和使用上有所区别。

<script> import { 
   ref, watch} from 'vue' export default { 
    setup() { 
    const state = ref(0) watch(state, (newValue, oldValue) => { 
    console.log(`原值为${ 
     oldValue}`) console.log(`新值为${ 
     newValue}`) /* 1秒后打印结果： 原值为0 新值为1 */ }) // 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秒后打印结果： 原值为0 新值为1 */ }) // 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) /* 初始化时打印： 0 zs 1秒后打印： 1 ls */ }) setTimeout(() => { 
    state.count ++ state.name = 'ls' }, 1000) } } </script>

2025年VUE3中watch和watchEffect的用法

相关推荐