Vue.js - 객체의 특정 속성 보기 및 변경 시 데이터 로드

Vue.js - 객체의 특정 속성 보기 및 변경 시 데이터 로드

Vue 구성 요소에 소품 이름이 지정되어 있음product, 그것은 많은 속성을 가진 물체다.그리고 그것은 자주 변한다.

export default {
    props: {
        product: {
            type: Object,
            default: () => {},
        },
    },
    watch: {
        'product.p1'() {
            this.loadData()
        },
        'product.p2'() {
            this.loadData()
        },
    },
    methods: {
        loadData() {
            doApiRequest(this.product.p1, this.product.p2)
        }
    },
}

속성만 사용할 경우 구성 요소가 새 데이터를 로드해야 함p1그리고p2의 product바뀌었어.한 가지 접근방식은 제품 전체를 관찰하고 데이터가 변경될 때 데이터를 로드하는 것이다.하지만 그것은 불필요한 요구를 만들어낸다.p1그리고p2변하지 않았을지도 모른다.

또 다른 생각은 지켜보는 것이다.product.p1그리고product.p2, 그리고 각 감시자에 데이터를 로드하기 위해 동일한 함수를 호출한다.하지만 둘 다 같은 일이 일어날 수도 있다.p1그리고p2새로운 버전의 제품에서 변경되면, 두 번의 통화를 유발할 수 있다.

데이터 로드에 디바운드된 기능을 사용하는 것이 좋은 솔루션이 될 것인가?

아니면 전체를 위해 단일 감시자를 사용하라.product새로운 것을 비교하다p1그리고p2데이터 로딩이 트리거되어야 하는지 여부를 결정하기 위해 이전 문자열화된 버전으로 문자열화된 경우

이것에 대한 몇 가지 접근법이 있는데, 각각 장단점이 있다.

내가 하는 한 가지 간단한 접근법은 당신이 보고자 하는 각각의 속성에 접근한 다음 새로운 빈 객체를 반환하는 감시 기능을 이용하는 것이다.부에가 안다.product.p1그리고product.p2워치 기능에 액세스했으므로 해당 속성 중 하나가 변경될 때마다 다시 재생할 수 있다.그런 다음, 워치 함수에서 새로운 빈 객체 인스턴스를 반환함으로써, 워치 함수가 새로운 값(따라서 감시되고 있는 값 "변경")을 반환했기 때문에, Vue는 워치 핸들러를 트리거할 것이다.

created() {
  this.$watch(() => {
    // Touch the properties we want to watch
    this.product.p1;
    this.product.p2;

    // Return a new value so Vue calls the handler when
    // this function is re-executed
    return {};
  }, () => {
    // p1 or p2 changed
  })
}

찬성:

• 아무것도 끈으로 묶을 필요가 없다.
• 시계 핸들러 기능을 포기할 필요는 없다.

반대:

• 의 이전 값을 추적할 수 없음p1그리고p2.
• 다음에 주의하십시오.this.product무효일 수도 있고 정의되지 않을 수도 있다.
• 그것은 항상 다음에 트리거될 것이다.p1또는p2변경된다 하더라도p1그리고p2다음 마이크로 과제 전에 이전 값으로 다시 설정된다(즉,$nextTick()); 그러나 이것은 대부분의 경우 문제가 될 것 같지 않다.
• 사용할 필요가 있음this.$watch(). 만약 당신이 사용하기를 원한다면watch대신, 당신은 계산된 속성을 볼 필요가 있다.

이러한 장점들 중 일부는 어쨌든 다른 접근법에 적용된다.

좀 더 컴팩트한 버전은 다음과 같다.

this.$watch(
  () => (this.product.p1, this.product.p2, {}),
  () => {
    // changed
  }
})

다른 개발자들 중 일부는 계산된 속성을 사용하여 변경사항을 모니터링할 수 있다고 말했다.product.p1또는product.p2아니면 둘 다 전화해서loadData()각 경우에 한 번만 방법여기 가상의 코드가 있다. product.vue구성 요소:

<template>
    <div>
        this is product compo
    </div>
</template>

<script>
export default {
    name: "product",
    watch: {
        p1p2: function(newVal, oldVal) {
            this.loadData();
        }
    },
    props: {
        productProp: {
            type: Object,
            default: () => {},
        },
    },

    computed: {
        p1p2: function() {
            return this.productProp.p1 + this.productProp.p2;
        }
    },
    methods: {
        loadData() {
            console.log("load data method");
        }
    },
}
</script>

나는 그것이 받은 소품 이름을 productProp으로 바꾸고, 라는 계산된 속성을 지켜보았다.p1p2그 점에 있어서나는 데이터의 값이 String 형식이라고 생각하지만 그렇지 않으면 변환할 수 있다).사실 p1p2는 의 연결이다.productProp.p1그리고productProp.p2. 따라서 하나 또는 둘 모두를 변경하면 loadData() 방법을 실행할 수 있다.다음은 데이터를 전달하는 상위 구성 요소의 코드 입니다.product.vue:

<template>
<section>
   
  <product :productProp = "dataObj"></product>
  <div class="d-flex justify-space-between mt-4">
    <v-btn @click="changeP1()">change p1</v-btn>
    <v-btn @click="changeP2()">change p2</v-btn>
    <v-btn @click="changeBoth()">change both</v-btn>
    <v-btn @click="changeOthers()">change others</v-btn>
  </div>
  
</section>
</template>

<script>
import product from "../components/product";

export default {
    name: 'parentCompo',

    data () {
      return {
        dataObj: {
          p1: "name1",
          p2: "name2",
          p3: "name3",
          p4: "name4"
        }
      }
    },
    components: {
      product
    },

    methods: {
      changeP1: function() {
        if (this.dataObj.p1 == "name1") {
          this.dataObj.p1 = "product1"
        } else {
          this.dataObj.p1 = "name1"
        }
      },

      changeP2: function() {
        if (this.dataObj.p2 == "name2") {
          this.dataObj.p2 = "product2"
        } else {
          this.dataObj.p2 = "name2"
        }
      },

      changeBoth: function() {
        if (this.dataObj.p2 == "name2") {
          this.dataObj.p2 = "product2"
        } else {
          this.dataObj.p2 = "name2"
        }

        if (this.dataObj.p1 == "name1") {
          this.dataObj.p1 = "product1"
        } else {
          this.dataObj.p1 = "name1"
        }
      },

      changeOthers: function() {
        if (this.dataObj.p3 == "name3") {
          this.dataObj.p3 = "product3"
        } else {
          this.dataObj.p3 = "name3"
        }
      }
    },
   
}
</script>

변경 버튼을 테스트하여 변경 내용을 확인하십시오.dataObj.p1또는dataObj.p2또는 둘 다 loadData() 방법은 한 번만 호출하고 다른 방법을 변경하여 호출하지 않는다.

참조URL: https://stackoverflow.com/questions/69979113/vue-js-watch-particular-properties-of-the-object-and-load-data-on-change