Vue3에서 시계를 사용하는 방법-View.js-php.cn

감시 기능은 특정 값의 변화를 수신하는 데 사용됩니다. 값이 변경되면 해당 처리 로직이 트리거됩니다.

1. Watch의 기본 인스턴스

<template>
  <div>
    <div>{{ count }}</div>
    <button @click="changCount">更改count的值</button>
  </div>
</template>
 
<script setup>
import {ref,reactive, watch} from &#39;vue&#39;
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:&#39;你好&#39;})
function changObj(){
  obj.value.name+=&#39;我不好&#39;
}
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:&#39;你好&#39;})
function changObj(){
  obj.value.name+=&#39;我不好&#39;
}
// 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:&#39;你好&#39;})
function changObj(){
  obj.value.name+=&#39;我不好&#39;
}
// 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:&#39;你好&#39;})
function changObj(){
  obj.value.name+=&#39;我不好&#39;
}
watch(obj.value,()=>{
  console.log(obj.value.name);
})
</script>
 
<style>
</style>

로그인 후 복사

watchEffect()참고: watchEffect 콜백은 즉시 실행되므로 즉시 지정할 필요가 없습니다.

6 watch와 watchEffect

watch와 watchEffect는 모두 응답적으로 실행될 수 있으며 부작용 콜백이 있습니다. 이들 사이의 주요 차이점은 반응적 종속성을 추적하는 방식입니다.

리스너 콜백에서 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:&#39;你好&#39;})
function changObj(){
  obj.value.name+=&#39;我不好&#39;
}
// watch(obj.value,()=>{
//   console.log(obj.value.name);
// })
watchEffect(()=>{
  console.log(obj.value.name);
})
</script>
 
<style>
</style>

로그인 후 복사

Stop listening

리스너 setup() 또는

저자별 최신 기사