이 글에서는 주로 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' } }
테스트 결과는
푸시 array Obj에 대한 작업과 $set 작업 모두 watch 이벤트를 트리거할 수 있지만 콜백에서 반환된 결과에서는 oldValue와 newValue가 동일합니다. 문자열 개체가 예상대로 반환됩니다
배열 및 Objs에 값을 할당할 때 트리거를 관찰하고 oldValue 및 newValue가 예상대로 반환됩니다
watch에 대한 기타 테스트
모니터링을 트리거할 수 없습니다
1, 배열
첨자의 속성 값 수정
기본 삭제를 사용하여 속성 삭제
첨자에 속성 추가($set 사용 안 함)
특정 첨자에 재할당됨
2, 개체
속성 삭제
위 요약에는 단점이 있을 수 있습니다
시계 모니터링은 타이거밤으로 구현됩니다.
array
arr = [...arr]obj
obj = {...obj}
요약
위 내용은 vue.js의 $watch의 oldvalue 및 newValue에 대한 심층 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!