>  기사  >  웹 프론트엔드  >  vue에서 watch 모니터링 객체 및 해당 값 변경을 구현하는 방법

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

亚连
亚连원래의
2018-06-04 16:18:512314검색

아래에서는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.