Vue에서 watch를 사용하여 배열의 변경 사항을 모니터링하는 방법

Vue에서 watch를 사용하여 배열 변경 사항을 모니터링하는 방법

Vue는 프런트 엔드 개발에서 가장 널리 사용되는 프레임워크 중 하나이며 데이터 응답성, 템플릿 렌더링 및 구성 요소화와 같은 기능을 구현하는 다양한 편리한 방법을 제공합니다. Vue에서는 데이터 변경 사항을 모니터링하기 위해 watch를 자주 사용하지만, 배열 변경 사항을 모니터링해야 할 때는 몇 가지 세부 사항에 주의를 기울여야 합니다.

Vue에서는 watch를 사용하여 단일 속성이나 개체의 변경 사항을 모니터링할 수 있습니다. 기본 사용법은 다음과 같습니다.

watch: {
  // 监听对象属性
  obj: {
    handler: function (newVal, oldVal) {
      // ...
    },
    deep: true
  },
  // 监听单个属性
  prop: function (newVal, oldVal) {
    // ...
  }
}

배열의 변경 사항을 모니터링하려면 다음 사항에 주의해야 합니다.

1. vm.$watch 메소드 사용

Vue는 데이터 변경 사항을 모니터링하는 vm.$watch 메소드를 제공합니다. 이 메소드는 모니터링을 취소하는 함수를 반환합니다. 여기서 vm은 Vue의 인스턴스를 나타냅니다. 배열의 경우 이 방법을 사용하여 배열의 변경 사항을 모니터링할 수 있습니다. 기본 사용법은 다음과 같습니다.

vm.$watch('arr', function (newVal, oldVal) {
  // ...
}, {
  deep: true
})

여기서 arr은 모니터링해야 하는 배열입니다. 핸들러 콜백 함수의 newVal 및 oldVal은 각각 모니터링되는 새 값과 이전 값을 나타냅니다. 또한 배열의 각 요소가 객체가 되는 경우가 많기 때문에 심층 모니터링을 위해서는 deep을 true로 설정해야 합니다.

Vue는 vm.$watch 메소드를 사용하여 모니터링되는 배열을 자동으로 하이재킹하지 않는다는 점에 유의해야 합니다. 따라서 어레이의 변경 사항을 모니터링하려면 어레이를 수동으로 하이재킹해야 합니다.

2. 배열의 각 요소를 모니터링합니다.

배열의 각 요소의 변경 사항을 모니터링해야 하는 경우 vm.$watch 메서드에서 Immediate 및 Handler 매개 변수를 사용할 수 있습니다.

arr.forEach(function (item, index) {
  vm.$watch(
    function () {
      return arr[index];
    },
    {
      immediate: true,
      deep: true,
      handler: function (newVal, oldVal) {
        // ...
      }
    }
  );
});

여기서는 즉시 true 입니다. 즉, 수신할 때 콜백 함수가 한 번 실행됩니다. 위의 코드는 전체 배열을 가로채는 것이 아니라 각 요소를 개별적으로 모니터링한다는 점에 유의해야 합니다.

3. 계산된 속성 사용

Vue의 계산된 속성은 기존 데이터를 기반으로 새 데이터를 계산할 수 있으므로 계산된 속성을 사용하여 배열의 변경 사항을 모니터링할 수 있습니다. 기본 사용법은 다음과 같습니다.

computed: {
  // 监听arr数组
  arrWatcher: function () {
    this.arr; // 调用一次arr，以实现依赖收集
    return this.arr;
  }
},
watch: {
  // 监听计算属性
  arrWatcher: {
    handler: function (newVal, oldVal) {
      // ...
    },
    deep: true
  }
}

여기서 arrWatcher는 우리가 정의한 계산된 속성이고, 이 계산된 속성의 반환 값은 모니터링되는 배열입니다. watch에서 계산된 속성의 변경 사항을 모니터링하면 됩니다. 계산된 속성은 종속성을 자동으로 수집하므로 배열이 변경되면 계산된 속성이 자동으로 업데이트되어 감시 콜백 함수가 트리거됩니다.

계산된 속성을 사용하여 배열 변경 사항을 모니터링할 때 한 가지에 주의해야 합니다. 즉, 배열 길이의 변경 사항만 모니터링하고 배열 요소의 변경 사항은 신경 쓰지 않는다면 간단히 다음과 같이 할 수 있습니다. 이를 달성하려면 계산된 속성을 사용하세요. 하지만 배열 요소의 변경 사항을 모니터링해야 하는 경우 배열의 각 요소도 하이재킹해야 하며 vm.$watch 메서드도 사용해야 합니다.

요약하자면 vm.$watch 메소드를 사용하여 배열의 각 요소를 모니터링하고 계산된 속성을 사용하여 Vue에서 배열의 변경 사항을 모니터링할 수 있습니다. 이러한 방법을 사용할 때 Vue가 배열의 변경 사항을 올바르게 모니터링할 수 있도록 배열을 하이재킹해야 한다는 점에 유의하는 것이 중요합니다.

위 내용은 Vue에서 watch를 사용하여 배열의 변경 사항을 모니터링하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!