VUE3中watch和watchEffect的用法详解

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秒后打印结果:
                  原值为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>

根据以上特征,我们可以自行选择使用哪一个监听器
另:watch和watchEffect监听器在同一个页面中都可以使用多次,对于分别监听多个变量的时候

到此这篇关于VUE3中watch和watchEffect的用法详解的文章就介绍到这了,更多相关VUE3 watch和watchEffect内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:

  • vue3 watch和watchEffect的使用以及有哪些区别
  • Vue3中watchEffect的用途浅析
  • vue3的watch和watchEffect你了解吗
  • 浅谈Vue3中watchEffect的具体用法
  • vue3中的watch和watchEffect实例详解
  • Vue3 中 watch 与 watchEffect 区别及用法小结
  • Vue3中的 computed,watch,watchEffect的使用方法
  • 一文搞懂Vue3中watchEffect侦听器的使用
  • vue3中watch和watchEffect实战梳理
张贴在2