하나의 기사를 통해 Vue3의 watchEffect에 대해 알아보고 해당 애플리케이션 시나리오에 대해 이야기해 보세요!

이 기사에서는 Vue3의 watchEffect에 대해 알아보고 부작용을 소개하며 모든 사람에게 도움이 되기를 바랍니다.

watchEffect는 종속성을 반응적으로 추적하고 종속성이 변경되면 함수를 다시 실행하면서 전달된 함수를 즉시 실행합니다. (학습 영상 공유: vue video tutorialwatchEffect，它立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。（学习视频分享：vue视频教程）

换句话说：watchEffect相当于将watch 的依赖源和回调函数合并，当任何你有用到的响应式依赖更新时，该回调函数便会重新执行。不同于 watch，watchEffect 的回调函数会被立即执行（即 { immediate: true }）

此文主要讲述怎样利用清除副作用使我们的代码更加优雅~

watchEffect的副作用

什么是副作用（side effect），简单的说副作用就是执行某种操作，如对外部可变数据或变量的修改，外部接口的调用等。watchEffect的回调函数就是一个副作用函数，因为我们使用watchEffect就是侦听到依赖的变化后执行某些操作。

当执行副作用函数时，它势必会对系统带来一些影响，如在副作用函数里执行了一个定时器setInterval，因此我们必须处理副作用。Vue3的watchEffect侦听副作用传入的函数可以接收一个 onInvalidate 函数作为入参，用来注册清理失效时的回调。当以下情况发生时，这个失效回调会被触发：

• 副作用即将重新执行时（即依赖的值改变）
• 侦听器被停止 (通过显示调用返回值停止侦听，或组件被卸载时隐式调用了停止侦听)

import { watchEffect, ref } from 'vue'

const count = ref(0)
watchEffect((onInvalidate) => {
  console.log(count.value)
  onInvalidate(() => {
    console.log('执行了onInvalidate')
  })
})

setTimeout(()=> {
  count.value++
}, 1000)

上述代码打印的顺序为： 0 -> 执行了onInvalidate，最后执行 -> 1

分析：初始化时先打印count的值0， 然后由于定时器把count的值更新为1, 此时副作用即将重新执行，因此onInvalidate的回调函数会被触发，打印执行了onInvalidate，然后执行了副作用函数，打印count的值1。

import { watchEffect, ref } from 'vue'

const count = ref(0)
const stop = watchEffect((onInvalidate) => {
  console.log(count.value)
  onInvalidate(() => {
    console.log('执行了onInvalidate')
  })
})

setTimeout(()=> {
  stop()
}, 1000)

上述代码：当我们显示执行stop函数停止侦听，此时也会触发onInvalidate的回调函数。同样，watchEffect所在的组件被卸载时会隐式调用stop函数停止侦听，故也能触发onInvalidate的回调函数。

watchEffect的应用

利用watchEffect的非惰性执行，以及传入的onInvalidate 函数，我们可以做什么事情了？

场景一：平时我们定义一个定时器，或者监听某个事件，我们需要在mounted生命周期钩子函数内定义或者注册，然后组件销毁之前在beforeUnmount钩子函数里清除定时器或取消监听。这样做我们的逻辑被分散在两个生命周期，不利于维护和阅读。

如果我利用watchEffect，创造和销毁逻辑放在了一起，此时代码更加优雅易读~

// 定时器注册和销毁
watchEffect((onInvalidate) => {
  const timer = setInterval(()=> {
    // ...
  }, 1000)
  onInvalidate(() => clearInterval(timer))
})

const handleClick = () => {
 // ...
}
// dom的监听和取消监听
onMounted(()=>{
  watchEffect((onInvalidate) => {
    document.querySelector('.btn').addEventListener('click', handleClick, false)
    onInvalidate(() => document.querySelector('.btn').removeEventListener('click', handleClick))
  })
})

场景二：利用watchEffect作一个防抖节流（如取消请求）

const id = ref(13)
watchEffect(onInvalidate => {
   // 异步请求
  const token = performAsyncOperation(id.value)
  // 如果id频繁改变，会触发失效函数，取消之前的接口请求
  onInvalidate(() => {
    // id has changed or watcher is stopped.
    // invalidate previously pending async operation
    token.cancel()
  })
})

......

当然watchEffect还能做很多事情，比如打开一个修改的modal弹窗，如果检测到id变化，我们可以在onInvalidate)

기타 즉, watchEffect는 watch의 종속성 소스와 콜백 함수를 병합하는 것과 같습니다. 사용하는 반응형 종속성이 업데이트되면 콜백 함수가 다시 실행됩니다. . watch와 다르게 watchEffect의 콜백 함수가 즉시 실행됩니다(예: {immediate: true })이 글에서는 주로 부작용 지우기를 사용하면 코드가 더욱 우아해집니다~

watchEffect의 부작용

부작용이란 무엇인가요? ( 사이드 이펙트) 간단히 말해서 사이드 이펙트는 외부 변수 데이터나 변수의 수정, 외부 인터페이스 호출 등과 같은 특정 작업을 수행하는 것입니다. watchEffect의 콜백 함수는 종속성 변경 사항을 수신한 후 특정 작업을 수행하기 위해 watchEffect를 사용하기 때문에 부작용 함수입니다.

🎜사이드 이펙트 함수가 실행되면 필연적으로 시스템에 어느 정도 영향을 미치게 됩니다. 예를 들어 사이드 이펙트 함수에서는 타이머 setInterval가 실행되므로 사이드 이펙트를 처리해야 합니다. 부작용을 수신하는 Vue3의 watchEffect 함수는 정리가 실패할 때 콜백을 등록하기 위해 onInvalidate 함수를 입력 매개변수로 받을 수 있습니다. 이 무효화 콜백은 다음 상황이 발생할 때 트리거됩니다: 🎜

• 부작용이 다시 실행되려고 할 때(예: 종속성 값이 변경됨)
• 리스너가 중지되었습니다. (호출의 반환 값을 표시함으로써 Stop listening, 또는 stop listening은 구성 요소가 제거될 때 암시적으로 호출됩니다.)

rrreee🎜위 코드가 인쇄되는 순서는 다음과 같습니다: 0 -> <code>onInvalidate 실행, 최종 실행 -> 1🎜🎜분석: 초기화 중에 count 값이 먼저 인쇄됩니다. 0 이후 타이머로 인해 count 값을 1로 업데이트하면 부작용이 다시 실행되므로 onInvalidate의 콜백 함수가 트리거되고 를 인쇄하고 onInvalidate를 실행한 다음 부작용 함수가 실행되어 count의 값을 인쇄합니다. > 1. 🎜rrreee🎜위 코드: 청취를 중지하기 위해 stop 함수를 실행하면 onInvalidate의 콜백 함수도 트리거됩니다. 마찬가지로 watchEffect가 언로드되는 구성 요소가 암시적으로 stop 함수를 호출하여 수신을 중지하므로 onInvalidate도 가능합니다. Triggered.code>의 콜백 함수. 🎜<h2 data-id="heading-2"><strong>watchEffect 애플리케이션</strong></h2>🎜 <code>watchEffect의 지연되지 않은 실행과 수신되는 onInvalidate를 활용합니다. 함수, 무엇을 할 수 있나요? 🎜🎜시나리오 1: 일반적으로 타이머를 정의하거나 이벤트를 수신할 때 이를 마운트 수명 주기 후크 함수에 정의하거나 등록해야 합니다. 구성 요소가 파괴되면 타이머를 지우거나 beforeUnmount 후크 함수에서 청취 기능을 취소하세요. 이런 식으로 우리의 논리는 두 가지 수명 주기로 분산되어 유지 관리와 읽기에 도움이 되지 않습니다. 🎜🎜watchEffect를 사용하면 생성 및 소멸 로직이 합쳐져 코드가 더 우아하고 읽기 쉽습니다~🎜rrreee🎜시나리오 2: watchEffect를 사용하여 흔들림 방지 제한(예: 요청 취소)🎜rrreee🎜......🎜🎜물론 watchEffect는 수정된 모달을 여는 등 많은 작업을 수행할 수도 있습니다. 팝업 창. id 변경을 감지한 후 onInvalidate 함수에서 초기 매개변수를 재설정할 수 있는 경우... 이것은 단지 소개일 뿐입니다. 모두가 그렇게 하길 바랍니다. 자세히 살펴보세요~🎜🎜 (학습 영상 공유: 🎜웹 프론트엔드 개발🎜, 🎜기본 프로그래밍 영상🎜)🎜

위 내용은 하나의 기사를 통해 Vue3의 watchEffect에 대해 알아보고 해당 애플리케이션 시나리오에 대해 이야기해 보세요!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!