vue3에서 시계를 사용하는 방법

데이터 모니터링이기 때문에 모니터링되는 것은 변화입니다. 그런 다음 변경 사항을 캡처할 수 있어야 하므로 모니터링되는 데이터는 반응형 데이터여야 합니다.

watch(WatcherSource, Callback, [WatchOptions])
매개변수:
WatcherSource: 모니터링하려는 반응형 데이터입니다.
Callback: 실행할 콜백 함수, 입력 매개변수(newValue, oldValue).
[WatchOptions]: deep,immediate,flush는 선택사항입니다.

WatchOptions의 매개변수 구성:

deep: 객체 등 참조 유형 데이터에 대한 심층 모니터링이 필요한 경우 deep: true로 설정하고 기본값은 false입니다.
immediate: 기본적으로 watch는 게으르다.immediate:true가 설정되면 watch는 초기화 즉시 콜백 함수를 한 번 실행합니다.
flush: 콜백 함수의 실행 타이밍을 제어합니다. 사전, 사후 또는 동기화로 설정할 수 있습니다.
Pre: 기본값. 모니터링된 값이 변경되면 콜백 함수가 먼저 실행됩니다(DOM이 업데이트되기 전에 실행됨).
게시: DOM이 업데이트되고 렌더링된 후 콜백 함수가 실행됩니다.
동기화: 모니터링된 값이 변경되면 콜백 함수가 동기적으로 실행됩니다(아껴서 사용하는 것이 좋습니다).

먼저 단일 데이터 ref

const count = ref(1);
watch(count, (newValue, oldValue) => {
  console.log('值发生了变更', newValue, oldValue);
});

를 모니터링하면 새로운 값과 이전 값을 얻을 수 있습니다.

두 번째, 모니터 참조형 데이터 참조: 심층 모니터링

const count = ref({
  a: 1,
  b: 2
});
const handleClick = function () {
 count.value.a = 5;
};
watch(count, (newValue, oldValue) => {
  console.log('值发生了变更', newValue, oldValue);
});

어레이 전체를 참조 데이터형으로 모니터링하더라도 내부 항목 중 하나의 변경 사항은 관찰되지 않습니다. 따라서 시계의 코드는 실행되지 않습니다.

1 참조형 ref가 직접 딥 모니터링을 수행합니다

이때 딥 모니터링을 사용해야 합니다: deep:true

const count = ref({
  a: 1,
  b: 2
});
const handleClick = function () {
  count.value.a = 5;
};
watch(
  count,
  (newValue, oldValue) => {
    console.log('值发生了变更', newValue, oldValue);
  },
  { deep: true }
);

값이 변경되었습니다. Proxy {a: 5, b: 2} Proxy {a: 5, b: 2}

심층 모니터링에는 해당 속성이 아닌 참조 데이터 유형 자체가 필요하다는 점을 알 수 있습니다. 더욱이 그는 새로운 값만 얻을 수 있고 이전 값은 얻을 수 없습니다.

2. 참조 유형 참조 심층 복사 및 심층 모니터링

const count = ref({
  a: 1,
  b: 2
});
const handleClick = function () {
  count.value.a = 5;
};
watch(
  () => {
    return { ...count.value };
  },
  (newValue, oldValue) => {
    console.log('值发生了变更', newValue, oldValue);
  },
  { deep: true }
);

이러한 방식으로 시계의 참조 유형 데이터 소스의 전체 복사본을 만들어 이전 값과 새 값 획득을 완료할 수 있습니다.

값 {a: 5, b: 2 } {a: 1, b: 2}

3개, 단일 데이터 모니터링: 반응성

const single = reactive({ count: 1, test: 2 });
const handleClick = function () {
  single.count++;
};
watch(
  () => single.count,
  (newValue, oldValue) => {
    console.log('值发生了变更', newValue, oldValue);
  },
  { immediate: true }
);

여기서 중요한 것은 () => Single.count, 모니터링되는 것은 이 속성이 변경될 때만 단일의 개수입니다. 콜백 함수가 트리거됩니다. 이 경우 이전 값과 새 값을 얻을 수 있습니다.

넷째, 모니터 참조형 데이터:active

<template>
  <div class="mine-box">
    <div ref="countDom">{{ single.count }}</div>
    <button @click="handleClick">按钮</button>
  </div>
</template>

<script setup>
import { ref, reactive, watch } from &#39;vue&#39;;
const single = reactive({ count: 1, test: { a: 1, b: 2 } });
const handleClick = function () {
  single.test.a++;
};
watch(
  single,
  (newValue, oldValue) => {
    console.log(&#39;值发生了变更&#39;, newValue, oldValue);
  },
  { immediate: true }
);
</script>

reactive 데이터, deep:true 사용 여부에 관계없이 단일 속성이 변경되면 모니터링할 수 있으며 콜백 함수가 실행됩니다.

3번과 다른 점은 이 경우 새로운 값만 얻을 수 있다는 점입니다.

다섯 번째, 즉시: true

기본적으로 watch는 게으른 상태입니다. setimmediate: true하면 watch는 초기화 즉시 콜백 기능을 실행합니다.

const count = ref(1);
const handleClick = function () {
  count.value++;
};
watch(
  count,
  (newValue, oldValue) => {
    console.log('值发生了变更', newValue, oldValue);
  },
  { deep: true, immediate: true }
);

여섯째, 여러 데이터 소스 모니터링

const count = ref(1);
const double = ref(2);
const handleClick = function () {
  count.value++;
  double.value++;
};
watch(
  [count, double],
  (newValue, oldValue) => {
    console.log('值发生了变更', newValue, oldValue);
  },
  { deep: true, immediate: true }
);

두 값이 동시에 변경되면 watch 콜백 함수가 한 번만 실행되고 값이 변경될 때마다 watch 콜백 함수가 실행됩니다.

데이터 셀 하나를 변경할 때 콜백을 트리거하려면 두 데이터 변경 사이에 nextTick을 추가하면 됩니다.

세븐, 플러시 구성

1. 기본적으로 콜백 함수는 DOM 렌더링이 완료되기 전에 호출됩니다.

콜백 함수는 DOM 업데이트 실행보다 우선 적용됩니다. 즉, 콜백 함수에 DOM 관련 연산이 있고 매개변수에 Immediate: true 가 구성되어 있으면 현재 DOM이 렌더링되지 않아 DOM을 얻을 수 없기 때문에 오류가 보고됩니다.

다음 코드를 살펴보겠습니다.

<template>
  <div class="mine-box">
    <div ref="countDom">{{ count }}</div>
    <button @click="handleClick">按钮</button>
  </div>
</template>

<script setup>
import { ref, watch } from &#39;vue&#39;;
const count = ref(1);
const countDom = ref(null);
const handleClick = function () {
  count.value++;
};
watch(
  count,
  (newValue, oldValue) => {
    console.log(&#39;---&#39;, countDom.value.textContent);
    console.log(&#39;值发生了变更&#39;, newValue, oldValue);
  },
  { deep: true }
);
</script>

얻은 결과:

---1의 값이 2로 변경되었습니다. 1

콜백 함수에서는 새 값이 2가 되었지만 DOM을 얻었습니다. 전과 같이. 기본적으로 플러시 값은 pre입니다. 값이 변경되면 DOM이 업데이트되기 전에 콜백 함수가 트리거됩니다.

2, 플러시: 'post’돔이 렌더링된 후 콜백 함수를 실행한 결과

<template>
  <div class="mine-box">
    <div ref="countDom">{{ count }}</div>
    <button @click="handleClick">按钮</button>
  </div>
</template>

<script setup>
import { ref, watch } from &#39;vue&#39;;
const count = ref(1);
const countDom = ref(null);
const handleClick = function () {
  count.value++;
};
watch(
  count,
  (newValue, oldValue) => {
    console.log(&#39;---&#39;, countDom.value.textContent);
    console.log(&#39;值发生了变更&#39;, newValue, oldValue);
  },
  { deep: true, flush: &#39;post&#39; }
);
</script>

:

--- 2 값이 변경되었습니다. 2 1

콜백 함수가 호출되면 DOM 이번에 획득한 DOM은 데이터 변경 후 업데이트된 DOM입니다.

위 내용은 vue3에서 시계를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!