vue에서 데이터 변경을 자동으로 감지하도록 watch를 구현하는 방법

이번 글에서는 Vue watch가 데이터 변화를 자동으로 감지하여 실시간으로 렌더링하는 방법을 주로 소개하고 참고용으로 올려드립니다.

이 글에서는 Vue watch가 데이터 변경 사항을 자동으로 감지하고 실시간으로 렌더링하는 방법을 소개합니다. 자세한 내용은 다음과 같습니다.

먼저 watch가 객체이며 반드시 객체로 사용되어야 하는지 확인하세요. 물체.

객체에는 키와 값이 있습니다.

Key: $route와 같이 모니터링하려는 녀석입니다. 이는 라우팅 변경을 모니터링하기 위한 것입니다. 또는 데이터의 변수입니다.
값은 함수일 수 있습니다. 모니터링 중인 항목이 변경될 때 실행해야 하는 함수입니다. 이 함수에는 두 가지 형식 매개변수가 있습니다. 첫 번째는 현재 값이고 두 번째는 변경된 값입니다.

값은 함수 이름일 수도 있습니다. 하지만 이 함수 이름은 작은따옴표로 묶어야 합니다.

세 번째 상황이 굉장하네요.

값은 옵션이 포함된 개체입니다. 세 가지 옵션이 있습니다.

1. 첫 번째 핸들러: 해당 값은 콜백 함수입니다. 즉, 변경사항이 감지되었을 때 실행되어야 하는 함수입니다.

2. 두 번째는 심층입니다. 해당 값은 심층 모니터링할지 여부를 확인합니다. (일반적으로 모니터링 중에는 객체 속성 값의 변화를 모니터링할 수 없지만 배열 값의 변화는 들을 수 있습니다.)

3. 세 번째는 즉시: 해당 값이 true 또는 false인지 확인합니다. 현재 초기값 함수를 사용합니다.

watch 인스턴스

지난번에 this.$set 또는 vm.set를 사용하여 페이지에 렌더링된 데이터(추가, 삭제)를 동적으로 변경하여 다시 계산하고 다시 렌더링할 수 있다고 언급했습니다. .

때때로 특정 데이터나 값을 동적으로 변경한 후 다음 코드 예제와 같이 변경한 값을 기반으로 다른 처리 작업(예: 표시, 숨기기, 추가, 삭제)을 수행해야 합니다.

여기 Tab의 예입니다.

vue 프로젝트에서 새 Tab 구성 요소 페이지 만들기

<template>
{{index}}
 <p>
   <p @click="showFun(0)">Tab1</p>
   <p @click="showFun(1)">Tab2</p>
   <p @click="showFun(2)">Tab3</p>
 </p>
 <p>
   <p v-if="index == 0">cont1</p>
   <p v-if="index == 1">cont1</p>
   <p v-if="index == 2">cont1</p>
 </p>
</template>
<script>
export default {
 data(){
  return {
    index: 0 // 索引
  }
 },
watch:{ // 实时检测
  index(idx){ //实时监听index的变化
    console.log(idx) //在这里你可以再根据idx的值，做出其它的操作
  }
},
 methods:{
   showFun(idx){
     this.index = idx
   }
 }
}
</script>

watch를 사용하면 데이터 변경 시 비동기 또는 비용이 많이 드는 작업을 수행해야 하는 경우 이 방법이 가장 유용합니다.

다른 검색 예를 들어보겠습니다:

<template>
 <input v-model="value" /> // 搜索框
</template>
<script>
export default {
 data(){
  return {
    value: &#39;&#39; // 值
  }
 },
 watch:{
   value(val){ // 实时监听数据变化
     this.wat_fun(val)
   }
 }， 
 methods:{
   wat_fun(val){ // 这里可以调用搜索api接口
    console.log(val)
   }
 }
}
</script>

위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

cropper의 js를 통해 vue에서 이미지 자르기 및 업로드 기능을 구현하는 방법

vue에서 Cropperjs를 사용하는 방법(자세한 튜토리얼)

vue.js에서 이미지의 로컬 미리보기 구현 자르기, 압축, 업로드 등 일련의 기능

FastClick 소스 코드에 대한 자세한 설명(자세한 튜토리얼)

vue 및 element-ui를 사용하여 테이블 콘텐츠 페이징을 구현하는 방법

위 내용은 vue에서 데이터 변경을 자동으로 감지하도록 watch를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!