> 웹 프론트엔드 > JS 튜토리얼 > Vue 배열과 객체의 할당 문제

Vue 배열과 객체의 할당 문제

php中世界最好的语言
풀어 주다: 2018-04-16 17:36:47
원래의
6232명이 탐색했습니다.

이번에는 vuearraysobjects 할당 문제를 가져왔습니다. vue 배열 및 객체 할당의 주의사항은 무엇인가요?

Vue는 다음 변경된 배열을 감지할 수 없습니다:

인덱스를 사용하여 항목을 직접 설정하는 경우(예: vm.items[indexOfItem] = newValuevm.items[indexOfItem] = newValue

当你修改数组的长度时,例如:vm.items.length = newLength

当第一种情况需求时,可以使用this.$set(this.arr,index,newVal)

Vue 不能检测对象属性的添加或删除:

  可以使用this.$set(this.person,'age',12)

     当需要添加多个对象时,<a href="//m.sbmmt.com/wiki/60.html" target="_blank">Object</a>.assign({},this.person,{age:12,name:'wee'})

) 배열의 길이를 수정하는 경우(예: vm.items.length = newLength

) 첫 번째 경우에 필요한 경우 this.$set(this.arr,index,newVal)을 사용할 수 있습니다. Vue는 속성

개체의 추가 또는 삭제를 감지할 수 없습니다:

this.$set(this.person,'age',12)를 사용할 수 있습니다

여러 객체를 추가해야 하는 경우 <strong>Object</strong>.sign({},this.person,{age:12,name:'wee'})

PS: Vue는 배열과 객체의 전체 복사 및 복제를 구현합니다

개체가 구성 요소 간에 전달될 때 이 개체의

reference

유형은 모두 주소를 가리키기 때문에(기본 유형과 null을 제외하고 개체 간의 할당은 실제 복사본이 아닌 동일한 주소만 가리킵니다). 다음과 같이

배열:


대상:

var obj = {a:10};
var obj2 = obj;
obj2.a = 20; // obj2.a改变了,
alert(obj.a); // 20,obj的a跟着改变
로그인 후 복사
이는 객체 유형이 직접 할당되고 참조가 동일한 주소를 가리키기 때문입니다. obj2도 수정됩니다
따라서 Vue에서는 여러 구성 요소가 동일한 개체를 데이터로 참조하는 경우 구성 요소 중 하나가 개체 데이터를 변경하면 다른 개체의 데이터도 동시에 변경됩니다. 이러한 양방향 바인딩이 필요하다면 당연히 이것이 최선입니다. 그러나 이 바인딩이 필요하지 않고 각 구성 요소의 개체 데이터가 서로 독립적이기를 원하는 경우, 즉 개체의 복사본이 필요합니다. 서로 관련이 없으면 다음을 사용할 수 있습니다.
computed: { 
   data: function () { 
     var obj={}; 
     obj=JSON.parse(JSON.stringify(this.templateData)); //this.templateData是父组件传递的对象 
     return obj 
  } 
 }
로그인 후 복사
해결 방법은 이 기사의 사례를 읽은 후 방법을 마스터했다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요. ! 🎜🎜추천 자료: 🎜🎜🎜시간 크기 비교를 위해 Yuansheng JS🎜🎜🎜🎜🎜js에서 비동기 파일 업로드를 구현하는 방법🎜🎜🎜🎜

위 내용은 Vue 배열과 객체의 할당 문제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿