vue3中的watch和watchEffect的区别

序言

vue3.X中的watch和watchEffect都能监听数据的变化,那两者的区别是怎样的?

watchEffect的解释

1、立即执行传入的一个函数,同时响应式追踪其依赖,并在其依赖变更时重新运行该函数
2、如果你需要侦听一个嵌套数据结构中的几个属性,watchEffect() 可能会比深度侦听器更有效,因为它将只跟踪回调中被使用到的属性,而不是递归地跟踪所有的属性。

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

1、watch 只追踪明确侦听的数据源。它不会追踪任何在回调中访问到的东西。另外,仅在数据源确实改变时才会触发回调。watch 会避免在发生副作用时追踪依赖,因此,我们能更加精确地控制回调函数的触发时机。

2、watchEffect,则会在副作用发生期间追踪依赖。它会在同步执行过程中,自动追踪所有能访问到的响应式属性。这更方便,而且代码往往更简洁,但有时其响应性依赖关系会不那么明确。

执行时机不同

watchEffect是立即执行的,在页面加载时会主动执行一次,来收集依赖,而watch是惰性地执行副作用,他不会立即执行,但可以配置immediate,使其主动触发

watchEffect(()=>{
console.log('响应了')})

watch((newValue, oldValue)=>{
console.log("触发了")
},{immediate:true})

参数不同

watchEffect只需要一个回调函数,不需要传递侦听的数据,它会在页面加载时主动执行一次,来收集依赖,而watch至少要有两个参数,第一个是监听的数据,第二个是回调函数,第三个是配置项

结果不同

watchEffect获取不到更改前的值,而watch可以获取新值和旧值

结语

两者功能相似,如果要立即执行的话,用watchEffect方便些

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3watchwatchEffect是用于侦听数据变化并执行副作用的函数,但它们有一些区别。 首先,执行时机不同。watchEffect是立即执行的,在页面加载时会主动执行一次,来收集依赖。而watch是惰性地执行副作用,它不会立即执行,但可以通过配置项immediate来使其在侦听开始时主动触发。 其次,参数不同。watchEffect只需要传递一个回调函数,不需要传递侦听的数据,它会在页面加载时主动执行一次,来收集依赖。而watch至少要有两个参数(第三个参数是配置项),第一个参数是侦听的数据,第二个参数是回调函数。 另外,结果不同。watchEffect只能获取到更改后的值,无法获取到更改前的值。而watch可以同时获取到更改前和更改后的值。 此外,watch API在Vue2也存在,它与Vue3watch API完全等效。watch需要侦听特定的数据源,并在单独的回调函数执行副作用。默认情况下,它也是惰性的,即回调仅在侦听源发生变化时被调用。 最后,watch函数还提供了取消监听的功能。通过调用watch函数会返回一个停止监听的函数,可以在需要停止监听时调用该函数来取消侦听。 综上所述,watchwatchEffectVue3区别主要体现在执行时机、参数和结果上。 #### 引用[.reference_title] - *1* *2* [【vue3】watchEffectwatch区别详解](https://blog.csdn.net/qq_38974163/article/details/122689303)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v4^insert_chatgpt"}} ] [.reference_item] - *3* [watchwatchEffect区别vue3)](https://blog.csdn.net/ZXH0122/article/details/129794342)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v4^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值