vue.js의 $watch의 oldvalue 및 newValue에 대한 심층 설명

이 글에서는 주로 vue.js의 $watch의 oldvalue와 newValue에 대한 관련 정보를 예제 코드를 통해 아주 자세하게 소개하고, watch에 관한 다른 테스트도 소개합니다. vue.js 특정 참조 및 학습 가치가 있습니다. 필요한 친구는 편집자를 따라 살펴볼 수 있습니다.

$watch

의 oldvalue 및 newValue 우리 모두 알고 있듯이 vue.js는 객체 변경을 모니터링하기 위한 $watch 메서드를 제공하며 콜백에서 두 객체가 각각 oldValue와 반환됩니다. newValue.

이름에서 알 수 있듯이 이 두 객체는 ​​객체가 변경되기 전과 후의 값입니다.

하지만 사용 중에 이 두 값이 항상 예상되는 것은 아니라는 것을 알게 되었습니다. 자세한 소개를 살펴보겠습니다.

데이터 값 정의

data: {
 arr: [{
  name: '笨笨',
  address: '上海'
 }, {
  name: '笨笨熊',
  address: '北京'
 }],
 obj: {
  name: '呆呆',
  address: '苏州'
 },
 str: '哈哈哈'
 }

시계 정의

watch: {
 arr: function(newValue, oldValue) {
  console.log(newValue, oldValue)
  console.log(JSON.stringify(oldValue) === JSON.stringify(newValue))
 },
 obj: function(newValue, oldValue) {
  console.log(newValue, oldValue)
  console.log(JSON.stringify(oldValue) === JSON.stringify(newValue))
 },
 str: function(newValue, oldValue) {
  console.log(newValue, oldValue)
  console.log(JSON.stringify(oldValue) === JSON.stringify(newValue))
 },
 }

이벤트 트리거 정의

methods: {
 test() {
  this.arr.push({
  name: 9
  })
  this.$set(this.obj, 'i', 0)
  this.str = ''
 },
 test1() {
  this.arr = [{
  name: '000'
  }]
  this.obj = {
  name: 999
  }
  this.str = '123'
 }
 }

테스트 결과는

1. 푸시 array Obj에 대한 작업과 $set 작업 모두 watch 이벤트를 트리거할 수 있지만 콜백에서 반환된 결과에서는 oldValue와 newValue가 동일합니다. 문자열 개체가 예상대로 반환됩니다

2. 배열 및 Objs에 값을 할당할 때 트리거를 관찰하고 oldValue 및 newValue가 예상대로 반환됩니다

watch에 대한 기타 테스트

모니터링을 트리거할 수 없습니다

1, 배열

첨자의 속성 값 수정

기본 삭제를 사용하여 속성 삭제

첨자에 속성 추가($set 사용 안 함)

                                                                                                                                   특정 첨자에 재할당됨

2, 개체

                                                속성 삭제

위 요약에는 단점이 있을 수 있습니다

시계 모니터링은 타이거밤으로 구현됩니다.

데이터를 수정한 후 이러한 코드를 추가하세요

array

arr = [...arr]

obj

obj = {...obj}

요약

위 내용은 vue.js의 $watch의 oldvalue 및 newValue에 대한 심층 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!