vue에서 watch 모니터링 객체 및 해당 값 변경을 구현하는 방법

아래에서는 vue watch 모니터링 개체의 변경 사항과 해당 값에 대한 자세한 설명을 공유하겠습니다. 좋은 참고 값이 있어 모든 분들께 도움이 되기를 바랍니다.

은 다음과 같습니다.

var vm=new Vue({
  data:{
    a:1,
    b:{
      c:1
    }
  },
  watch:{
    a(val, oldVal){//普通的watch监听
      console.log("a: "+val, oldVal);
    },
    b:{//深度监听，可监听到对象、数组的变化
      handler(val, oldVal){
        console.log("b.c: "+val.c, oldVal.c);//但是这两个值打印出来却都是一样的
      },
      deep:true
    }
  }
})
vm.a=2
vm.b.c=2

a는 a의 값이 변경될 때 모니터링되며 a처럼 직접 작성할 수 없습니다. 캡처할 수 있는데 b 객체에서 특정 값의 변화를 캡처하려고 했을 때 그림과 같이 인쇄된 두 값이 서로 다른 것을 발견했습니다.

이렇게 하면 객체가 변경되었다는 것만 알 수 있지만 어떤 값이 변경되었는지는 알 수 없습니다. 객체의 특정 값의 변경을 모니터링하려면 계산된 속성을 사용하면 됩니다. 계산된 값을 모니터링하면 해당 값이 변경되었는지 직접 알 수 있습니다. 결과는 그림과 같습니다.

위 내용은 모두에게 도움이 되기를 바랍니다. 미래에.

관련글 :

nodejs로 구현한 간단한 웹 서버 기능 예시

vue-cli가 생성한 프로젝트, 멀티 페이지 구현 구성 방법

nodejs의 mysql에 접속하고 운영하는 간단한 방법 예시 데이터베이스

위 내용은 vue에서 watch 모니터링 객체 및 해당 값 변경을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!