vue3 데이터가 watch/watchEffect를 모니터링하는 방법

우리 모두는 반응 상태가 변경될 때마다를 트리거하는 것이 리스너의 역할이라는 것을 알고 있습니다. 결합된 API에서는 변경 시 watch() 함수 및 watchEffect() 함수,

를 사용할 수 있습니다. 반응 상태를 사용하면 Vue 구성 요소 업데이트와 리스너 콜백을 모두 트리거할 수 있습니다.

기본적으로 사용자가 만든 리스너 콜백은 Vue 구성 요소가 업데이트되기 전에 호출됩니다. 이는 리스너 콜백에서 액세스하는 DOM이 Vue에 의해 업데이트되기 전의 상태가 됨을 의미합니다.

그럼, 어떻게 활용하면 좋을지 살펴볼까요? 그들 사이의 차이점은 무엇입니까?

watch() 함수

watch는 심판 청취와 같은 특정 데이터 소스를 청취해야 합니다. watch의 첫 번째 매개변수는 다양한 형식의 "데이터 소스"일 수 있습니다. ref( 계산된 속성 포함), 반응형 개체, getter 함수 또는 여러 데이터 소스의 배열, 다음과 같습니다.

const x = ref(0)
const y = ref(0)

// 单个 ref
watch(x, (newX) => {
  console.log(`x is ${newX}`)
})

// getter 函数
watch(
  () => x.value + y.value,
  (sum) => {
    console.log(`sum of x + y is: ${sum}`)
  }
)



// 多个来源组成的数组
watch([x, () => y.value], ([newX, newY]) => {
  console.log(`x is ${newX} and y is ${newY}`)
})


const obj = reactive({ count: 0 })
//传入一个响应式对象
watch(obj, (newValue, oldValue) => {
  // 在嵌套的属性变更时触发
  // 注意：`newValue` 此处和 `oldValue` 是相等的
  // 因为它们是同一个对象！
})

obj.count++


watch(
  () => obj.count,
  (newValue, oldValue) => {
    // 注意：`newValue` 此处和 `oldValue` 是相等的
    // *除非* obj.count 被整个替换了
  },
  { deep: true }
)

반응형 개체의 속성 값을 직접 들을 수 없다는 점에 유의하세요

const obj = reactive({ count: 0 })

// 错误，因为 watch() 得到的参数是一个 number
watch(obj.count, (count) => {
  console.log(`count is: ${count}`)
})

여기서 이 속성을 반환하는 getter 함수를 사용해야 합니다.

// 提供一个 getter 函数
watch(
  () => obj.count,
  (count) => {
    console.log(`count is: ${count}`)
  }
)

watch는 기본적으로 게으릅니다. 콜백은 데이터 소스가 변경될 때만 실행됩니다. 그러나 일부 시나리오에서는 리스너를 생성할 때 즉시 콜백을 실행하려고 합니다. 예를 들어 초기 데이터를 요청한 다음 해당 상태가 변경되면 데이터를 다시 요청하고 싶습니다.

우리는 immediate: true 옵션을 전달하여 리스너의 콜백이 즉시 실행되도록 할 수 있습니다.

watch(source, (newValue, oldValue) => {
  // 立即执行，且当 `source` 改变时再次执行
}, { immediate: true })

watchEffect() 함수

watchEffect()를 사용하면 콜백의 반응적 종속성을 자동으로 추적할 수 있습니다.

const todoId = ref(1)
const data = ref(null)

watchEffect(async () => {
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/todos/${todoId.value}`
  )
  data.value = await response.json()
})

이 예에서는 콜백이 즉시 실행됩니다.

immediate: true를 지정할 필요가 없습니다. 실행 중에 todoId.value를 종속성(계산된 속성과 유사)으로 자동 추적합니다. todoId.value가 변경될 때마다 콜백이 다시 실행됩니다. watchEffect()를 사용하면 더 이상 todoId를 소스 값으로 명시적으로 전달할 필요가 없습니다 .

watchEffect()는 종속성이 여러 개인 리스너에 적합합니다. 종속성이 하나만 있는 이 예에서는 이점이 상대적으로 적습니다. 또한 중첩된 데이터 구조에서 여러 속성을 수신해야 하는 경우 watchEffect()는 모든 속성을 재귀적으로 추적하는 대신 콜백에 사용되는 속성만 추적하므로 딥 리스너보다 더 효율적일 수 있습니다.

리스너 콜백에서 Vue가 업데이트한 DOM에 액세스하려면

flush: ‘post’ 옵션을 지정해야 합니다. post-flush watchEffect()에는 watchPostEffect():

import { watchPostEffect } from 'vue'

watchPostEffect(() => {
  /* 在 Vue 更新后执行 */
})

라는 더 편리한 별칭이 있습니다.

watch와 watchEffect의 연결 및 차이점

watch와 watchEffect 모두 반응적으로 부작용이 있는 콜백을 실행할 수 있습니다. 둘 사이의 주요 차이점은

반응적 종속성을 추적하는 방식입니다.

watch는 명시적으로 청취되는

데이터 소스만 추적합니다. 콜백에서 액세스된 항목은 추적하지 않습니다. 또한 콜백은 데이터 소스가 실제로 변경될 때만 트리거됩니다. watch는 부작용이 발생할 때 종속성 추적을 방지하므로 콜백 함수가 트리거되는 시기를 보다 정확하게 제어할 수 있습니다.

watchEffect는 부작용이 발생하는 동안 종속성을 추적합니다. 동기화 중에 액세스 가능한 모든 반응 속성을 자동으로 추적합니다. 이것이 더 편리하고 코드가 더 깔끔한 경향이 있지만 때로는 반응적 종속성이 덜 명시적입니다.

다양한 의존성이 있는 청취자에게 적합

위 내용은 vue3 데이터가 watch/watchEffect를 모니터링하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!