VUE3 watch和watchEffect
得知此事须躬行 人气:0watch和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监听器在同一个页面中都可以使用多次,对于分别监听多个变量的时候
加载全部内容