Vue3.0-watch&&watchEffect函数

一、watch功能罗列

1、具有一定的惰性,第一次加载页面不能执行,只有数据变化的时候才会执行

2、参数可以拿到当前值和原始值

3、可以侦听多个数据的变化,用一个侦听器承载

二、watchEffect功能罗列

1、立即执行,没有惰性,页面的首次加载就会执行

2、自动检测内部代码,代码中有依赖就会执行

3、不需要传递侦听数据的内容会自动感知代码和依赖代码,不需要传递多个参数,只需要传递一个回调函数

4、不能获取之前的数据,只能过去当前的数据

5、一些异步的操作放到这里比较合适

三、对比

watch和watchEffect都能响应式的执行副作用的回调,它们之间的主要区别是追踪响应式依赖的方式:

watch:

    (1)只追踪明确侦听的数据源,不追踪回调访问的东西

    (2)数据确实改变的时候才会回调

    (3)可以更加准确的控制回调函数的触发时机

watchEffect:

    (1)会在副作用发生期间追踪依赖

    (2)自动追踪所有能放问到的响应式的属性

    (3)代码更简洁,但有时依赖关系没有那么明确

四、使用选择

1、有多个依赖项,使用watchEffect可以消除手动维护依赖列表的负担

2、侦听一个嵌套数据结构中的几个属性,effect可能会比深度监测更有效

除了上面两点之外,其他情况建议使用watch来监测

五、例子说明

例一

在下面这里watchEffect会立即执行,在执行期间,他会自动追踪select.value作为依赖(和计算属性类似),当select.value变化时,回调会再次执行

注意: 这个例子只是简单列举一个异步的例子,但是因为只涉及到一个依赖项,watchEffect并不能提现出来多大的优点

const select= ref("")
const commits=ref(null)

// watchEffect写法
watchEffect(async()=>{
 let res = await axios.get(`http://www.xxx/${select.value}`)
 commits.value=res.data
})

// watch写法
watch(select, async(value)=>{
let res = await axios.get(`http://www.xxx/${value}`)
commits.value=res.data
}, {immediate: true})

例二

要求messagea和messageb变化的时候,实时获取result的值,因为watch只追踪明确侦听的数据源,如果用watch来实现的话,watch就需要写两个监测源,但是watchEffect不需要,它是自动追踪所有能访问到的响应式属性,messagea和messageb无论是谁发生变化都会执行这个函数

const messagea = ref(1)
const messageb = reg(2)
const result = ref(null)

// watch 的写法
watch(meassagea, ()=>{
 result.value=messagea.value+messageb.value
}, {immediate:true})

watch(meassageb, ()=>{
 result.value=messagea.value+messageb.value
}, {immediate:true})

// watchEffect的写法
watchEffect(()=>{
 result.value=messagea.value+messageb.value
})


{{result}}
<input v-model="measagea" />
<input v-model="measageb" />

watch3.0详细讲解:Vue3.0-watch侦测器-CSDN博客

  • 27
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值