vue3에서 watch 및 watchEffect를 사용하는 방법

먼저 둘의 차이점을 요약하자면:

1. Watch는 Lazy 방식으로 실행되지만 watchEffect는 그렇지 않습니다. watch의 세 번째 매개변수 구성에 관계없이 컴포넌트가 실행되면 watch가 실행되지 않습니다. 나중에 종속성이 변경될 때 실행되는 반면 watchEffect는 여기에서 프로그램이 실행될 때 즉시 실행된 다음 종속성이 변경되면 실행됩니다.

2. 둘은 서로 다른 방식으로 사용됩니다. Watch는 일반적으로 두 가지 매개변수를 전달합니다. 첫 번째 매개변수는 리스너가 다시 실행되도록 하는 상태를 설명하고, 두 번째 매개변수는 리스너 콜백 함수를 허용할 수도 있습니다. 매개변수는 상태 변경 전후의 값을 가리키므로 상태 전후의 변경 사항을 볼 수 있지만 watchEffect에서는 볼 수 없으며 다음과 같은 첫 번째 매개변수에서 종속성을 더 구체적으로 정의할 수 없습니다. 보다. .

3. Watch는 반응형 데이터와 ref로 정의된 값만 모니터링할 수 있습니다. 단일 값을 모니터링하려면 해당 값의 getter 함수를 전달해야 합니다. 그러나 watchEffect는 정의된 값을 모니터링할 수 없습니다. 반응성 및 참조를 통해 해당 값만 모니터링할 수 있습니다. (약간 복잡하게 느껴집니다. 아래 코드를 참조하세요.)

다음은 위의 세 번째 사항을 기반으로 한 몇 가지 작은 실험입니다.

watch:

1. watch 및 watchEffect가 반응성으로 정의된 값을 모니터링하도록 합니다.

watch:

setup() {
    const state = reactive({ count: 0, attr: { name: "" } });
    watch(state, (post, pre) => {
        console.log(post);
        console.log(pre);
        console.log("watch 执行了");
    });
    const clickEvent = () => {
        state.count++;
    };
    return { clickEvent };
}

clickEvent 이벤트가 트리거되면 상태 .count 값이 변경되면 콘솔에서 watch가 state.count의 변경 사항에 응답했지만 처음에는 실행되지 않았음을 나타내는 다음 결과를 볼 수 있습니다.

watchEffect:

setup() {
    const state = reactive({ count: 0, attr: { name: "" } });
    watchEffect(() => {
        console.log("watchEffect 执行了");
        console.log(state);
    });
    const clickEvent = () => {
        state.count++;
    };
    return { clickEvent };
}

버튼을 여러 번 클릭하여 clickEvent 이벤트를 트리거하면 콘솔 결과는 다음과 같으며, watchEffect는 구성 요소가 처음 실행될 때 콜백을 실행했지만 변경 사항에 응답하지 않았음을 나타냅니다. 그 후 state.count에서.

watch는 반응성으로 정의된 값을 모니터링할 수 있지만 watchEffect는 모니터링할 수 없다고 설명합니다.

2 watch 및 watchEffect가 ref로 정의된 값을 모니터링하도록 합니다.

watch:

setup(){
    const count = ref(0);
    watch(count, (post, pre) => {
        console.log("watch 执行了");
        console.log(post);
        console.log(pre);
    });
    const clickEvent = () => {
        count.value++;
    };
    return { clickEvent };
}

Result:

watchEffect:

setup(){
    const count = ref(0);
    watchEffect(() => {
      console.log("watchEffect 执行了");
      console.log(count);
    });
    const clickEvent = () => {
      count.value++;
    };
    return { clickEvent };
}

Result:

결과는 위와 동일하며 watch는 ref로 정의된 값에 응답할 수 있지만 watchEffect는 응답할 수 없음을 나타냅니다.

2. watch 및 watchEffect가 단일 값의 변경 사항에 응답하도록 합니다.

watch:

setup(){
    const state = reactive({ count: 0 });
    watch(state.count, (post, pre) => {
        console.log("watch 执行了");
        console.log(post);
        console.log(pre);
    });
    const clickEvent = () => {
        state.count++;
    };
    return { clickEvent };
}

결과는 clickEvent 이벤트가 어떻게 트리거되든 시계의 콜백 함수가 트리거되지 않고 콘솔이 실행됨을 보여줍니다. 아무것도 인쇄하지 않습니다.

watchEffect:

setup(){
    const state = reactive({ count: 0 });
    watchEffect(() => {
        console.log("watchEffect 执行了");
        console.log(state.count);
    });
    const clickEvent = () => {
        state.count++;
    };
    return { clickEvent };
}

콘솔 결과:

watchEffect는 단일 값에 응답할 수 있지만 watch는 카운트 변경에 응답할 수 없다는 설명입니다.

setup(){
    const state = reactive({ count: 0 });
    watch(
        () => state.count,
        (post, pre) => {
            console.log("watch 执行了");
            console.log(post);
            console.log(pre);
        }
    );
    const clickEvent = () => {
        state.count++;
    };
    return { clickEvent };
}

getter 함수가 상태 참조 값을 반환하는 경우 state.count 변경 시 상태 참조 값이 수정되지 않으므로 state.count 변경에 응답하지 않습니다. , 세 번째 매개변수 구성인 {deep:true}를 전달해야 하며 코드의 post 및 pre 값은 다음과 같이 동일합니다.

setup(){
    const state = reactive({ count: 0 });
    //不会响应变化
    watch(
        () => state,
        (post, pre) => {
            console.log("watch 执行了");
            console.log(post);
            console.log(pre);
        }
    );
    const clickEvent = () => {
        state.count++;
    };
    return { clickEvent };
}

setup(){
    const state = reactive({ count: 0 });
    //加上了 {deep:true} 可以响应变化
    watch(
        () => state,
        (post, pre) => {
            console.log("watch 执行了");
            console.log(post);
            console.log(pre);
        },
        {deep:true}
    );
    const clickEvent = () => {
        state.count++;
    };
    return { clickEvent };
}

참조 값이 반환되면 비교해야 합니다. 변경 전후의 다른 값을 반환하려면 getter 함수를 전달해야 합니다. 다음 예와 같이 객체 전체 복사 후 값은 배열을 반환합니다.

setup(){
    const state = reactive({ count: 0 });
    const numbers = reactive([0, 1, 2, 3]);
    watch(
        () => [...numbers],
        (post, pre) => {
            console.log("watch 执行了");
            console.log(post);
            console.log(pre);
        }
    );
    const clickEvent = () => {
        numbers.push(1);
    };
    return { clickEvent };
}

콘솔 결과:

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