vue3中的watch和watchEffect的区别

新增的watchEffect和watch的区别

  • 序言
    • watchEffect的解释
    • 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方便些

你可能感兴趣的:(vue.js,javascript,ecmascript)