Vue3에서 시계를 사용하는 방법
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB앞으로
- 2023-05-12 09:49:051857검색
감시 기능은 특정 값의 변화를 수신하는 데 사용됩니다. 값이 변경되면 해당 처리 로직이 트리거됩니다.
1. Watch의 기본 인스턴스
<template>
<div>
<div>{{ count }}</div>
<button @click="changCount">更改count的值</button>
</div>
</template>
<script setup>
import {ref,reactive, watch} from 'vue'
const count = ref(0)
function changCount(){
count.value++
}
watch(count,(newValue,oldValue)=>{
if(newValue){
console.log(`我侦听到了count状态的变化，当前值为${newValue},从而处理相关逻辑`);
}
})
</script>
<style>
</style>2. Watch는 여러 데이터를 모니터링합니다.
getter 기능:
<template>
<div>
<div>{{ x }}</div>
<button @click="changCount">更改count的值</button>
</div>
</template>
<script setup>
import { ref, reactive, watch } from "vue";
const x = ref(1);
const y = ref(5);
function changCount() {
x.value++;
}
watch(
() => x.value + y.value,
(sum) => {
console.log(`我是x与y之和${sum}`);
}
);
</script>
<style>
</style>여러 소스로 구성된 배열
<template>
<div>
<div>{{ x }}</div>
<button @click="changCount">更改count的值</button>
</div>
</template>
<script setup>
import { ref, reactive, watch } from "vue";
const x = ref(1);
const y = ref(5);
function changCount() {
x.value++;
}
watch(
[x,y],
([x,y]) => {
console.log(`我是x=>${x},我是y=》${y}`);
}
);
</script>
<style>
</style>3. 구성 매개변수
1.deep
는 심층 모니터링을 활성화하는 데 사용됩니다.
<template>
<div>
<div>{{ obj.name }}</div>
<button @click="changObj">更改count的值</button>
</div>
</template>
<script setup>
import { ref, reactive, watch } from "vue";
const obj = ref({name:'你好'})
function changObj(){
obj.value.name+='我不好'
}
watch(()=>obj.value.name,(name)=>{
console.log(name);
})
</script>
<style>
</style>2.immediate
초기화 감지 활성화 여부는 기본값이 값이 변경될 때만 실행되는 것입니다. 즉시를 한 번 활성화한 후 초기화 후 실행됩니다.
<template>
<div>
<div>{{ obj.name }}</div>
<button @click="changObj">更改count的值</button>
</div>
</template>
<script setup>
import { ref, reactive, watch, watchEffect } from "vue";
const obj = ref({name:'你好'})
function changObj(){
obj.value.name+='我不好'
}
// obj是一个RefImpl对象，当不开启深度监听的时候，监听obj无法检测到obj属性的变化
watch(obj,()=>{
console.log(obj.value.name);
}, { deep: true })
</script>
<style>
</style>5. watchEffect()를 통해 감시 단순화
리스너 콜백이 소스와 정확히 동일한 반응 상태를 사용하는 것이 일반적입니다. 예:
<template>
<div>
<div>{{ obj.name }}</div>
<button @click="changObj">更改count的值</button>
</div>
</template>
<script setup>
import { ref, reactive, watch, watchEffect } from "vue";
const obj = ref({name:'你好'})
function changObj(){
obj.value.name+='我不好'
}
// obj是一个RefImpl对象，当不开启深度监听的时候，监听obj无法检测到obj属性的变化
watch(obj,()=>{
console.log(obj.value.name);
}, { deep: true,immediate:true })
</script>
<style>
</style>watchEffect 함수를 사용하여 위 코드를 단순화할 수 있습니다.
콜백의 반응적 종속성을 자동으로 추적할 수 있습니다. 위 리스너는 다음과 같이 다시 작성할 수 있습니다.<template>
<div>
<div>{{ obj.name }}</div>
<button @click="changObj">更改count的值</button>
</div>
</template>
<script setup>
import { ref, reactive, watch, watchEffect } from "vue";
const obj = ref({name:'你好'})
function changObj(){
obj.value.name+='我不好'
}
watch(obj.value,()=>{
console.log(obj.value.name);
})
</script>
<style>
</style>watchEffect()참고: watchEffect 콜백은 즉시 실행되므로 즉시 지정할 필요가 없습니다.
6 watch와 watchEffect
watch와 watchEffect는 모두 응답적으로 실행될 수 있으며 부작용 콜백이 있습니다. 이들 사이의 주요 차이점은 반응적 종속성을 추적하는 방식입니다.
- watch는 명시적으로 청취되는 데이터 소스만 추적합니다. 콜백에서 액세스된 항목은 추적하지 않습니다. 또한 콜백은 데이터 소스가 실제로 변경될 때만 실행됩니다. watch는 부작용이 발생할 때 종속성 추적을 방지하므로 콜백 함수가 트리거되는 시기를 보다 정확하게 제어할 수 있습니다.
- watchEffect는 부작용이 발생하는 동안 종속성을 추적합니다. 동기화 중에 액세스 가능한 모든 반응 속성을 자동으로 추적합니다. 이것이 더 편리하고 코드가 더 깔끔한 경향이 있지만 때로는 반응적 종속성이 덜 명시적입니다.
- 7. 콜백 트리거 메커니즘 및 리스너 중지
리스너 콜백에서 Vue로 업데이트된 DOM에 액세스하려면 플러시: 'post' 옵션을 지정해야 합니다.
<template>
<div>
<div>{{ obj.name }}</div>
<button @click="changObj">更改count的值</button>
</div>
</template>
<script setup>
import { ref, reactive, watch, watchEffect } from "vue";
const obj = ref({name:'你好'})
function changObj(){
obj.value.name+='我不好'
}
// watch(obj.value,()=>{
// console.log(obj.value.name);
// })
watchEffect(()=>{
console.log(obj.value.name);
})
</script>
<style>
</style>Stop listening
리스너 setup() 또는 5101c0cdbdc49998c642c71f6b6410a8에서 동기 문으로 생성된 스크립트는 호스트 구성 요소 인스턴스에 자동으로 바인딩되고 호스트 구성 요소가 제거되면 자동으로 중지됩니다. 따라서 대부분의 경우 리스너 중지에 대해 걱정할 필요가 없습니다.
핵심은 리스너가 동기 문으로 생성되어야 한다는 것입니다. 비동기 콜백으로 리스너를 생성하면 현재 구성 요소에 바인딩되지 않으며 메모리 누수를 방지하기 위해 수동으로 중지해야 합니다. 아래 예:
watch(source, callback, {
flush: 'post'
})
watchEffect(callback, {
flush: 'post'
})위 내용은 Vue3에서 시계를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
이 기사는 yisu.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제