VUE의 내보내기 기본 내보내기 데이터를 수정할 수 있습니까?

VUE의 내보내기 기본 내보내기 데이터는 변동성이 있으며 내보낸 객체의 속성을 수정하면 모든 참조에 영향을 미칩니다. 그러나 Data () 함수에 의해 반환 된 데이터를 조정해야하며, 응답 시스템의 무결성을 유지하기 위해 구성 요소 인스턴스를 통해 액세스하고 수정해야합니다.

VUE : Truth and Trap의 export default 으로 내보낸 데이터 변동성

많은 VUE 개발자가 export default 사용하여 내보내기 데이터를 사용 할 때 질문에 대해 혼란 스러울 것입니다. 내보낸 데이터를 수정할 수 있습니까? 대답은 : 수정 될 수 있지만 조심하십시오! 이 기사는이 문제를 심층적으로 파고 숨겨진 함정을 드러냅니다. 그것을 읽은 후에는 VUE 구성 요소의 데이터 관리에 대해 더 깊이 이해하고 일반적인 함정에 빠지지 않습니다.

결론에 대해 먼저 이야기 해 봅시다. export default 객체의 사본이 아닌 개체에 대한 참조를 내보내십시오. 즉, 내보낸 객체 자체의 특성을 수정하면 수정이 전 세계적으로 표시되며 객체를 참조하는 모든 구성 요소가 영향을받습니다. 그러나 이것이 data() 함수에 의해 반환 된 개체의 경우 마음대로 수정할 수 있다는 의미는 아닙니다.

먼저 VUE 구성 요소의 기본 구조 및 데이터 관리 메커니즘을 검토합시다. data() 함수에 의해 반환 된 객체는 Vue가 데이터 변경 및 업데이트보기를 추적하는 데 사용하는 구성 요소의 응답 데이터 소스입니다. export default 다른 모듈에서 쉽게 사용하기 위해이 구성 요소 ( data() 에 의해 반환 된 데이터 포함)를 내보내는 것입니다.

예를 들어, 구성 요소 MyComponent.vue 가 있다고 가정 해 봅시다.

 <code class="vue"><template> <div>{{ message }}</div> </template> <script> export default { data() { return { message: &#39;Hello, world!&#39; } } } </script></code>

이제 다른 구성 요소 AnotherComponent.vue MyComponent 에서 가져와 사용합니다.

 <code class="vue"><template> <div> <mycomponent></mycomponent> <p>Message from MyComponent: {{ myMessage }}</p> </div> </template> <script> import MyComponent from &#39;./MyComponent.vue&#39; export default { components: { MyComponent }, data() { return { myMessage: &#39;&#39; } }, mounted() { this.myMessage = MyComponent.data().message; // 直接访问data()，这通常不是一个好主意} }; </script></code>

이 코드는 괜찮아 보이지만 mounted 라이프 사이클 기능에서 MyComponent.data() 에 직접 액세스하면 숨겨진 위험이 있습니다. message 의 값을 얻을 수 있지만이 방법은 vue의 반응 형 시스템을 중단합니다. MyComponent 의 message 수정하면 AnotherComponent 의 myMessage 업데이트되지 않습니다.

이를 수행하는 올바른 방법은 구성 요소 인스턴스를 통해 데이터에 액세스하고 수정하는 것입니다.

 <code class="vue"><template> <div> <mycomponent ref="myComponent"></mycomponent> <p>Message from MyComponent: {{ myMessage }}</p> <button>Change Message</button> </div> </template> <script> import MyComponent from &#39;./MyComponent.vue&#39; export default { components: { MyComponent }, data() { return { myMessage: &#39;&#39; } }, mounted() { this.$nextTick(() => { this.myMessage = this.$refs.myComponent.message; }) }, methods: { changeMessage() { this.$refs.myComponent.message = &#39;Message changed!&#39;; } } }; </script></code>

$refs 여기에서 MyComponent 의 인스턴스를 얻은 다음 인스턴스를 통해 message 에 액세스하고 수정하는 데 사용됩니다. 이러한 방식으로 VUE의 반응 형 시스템은 정상적으로 작동하며 뷰는 자동으로 업데이트됩니다.

export default 내보내는 경우 더 깊어지면서 : 예를 들어 :

 <code class="javascript">export default { foo: 'bar', baz: 123 };</code>

importedObject.foo = 'new bar'; 과 같은이 객체의 속성을 직접 수정하는 것은 완전히 유효 하며이 수정은 객체를 가져 오는 모든 모듈에 영향을 미칩니다.

요컨대, export default . 내보낸 객체 속성을 수정하면 모든 참조에 영향을 미치지 만 data() 함수에 의해 반환 된 데이터를 직접 조작하지 않아야하지만 VUE 응답 시스템의 무결성을 유지하기 위해 구성 요소 인스턴스를 통해 작동해야합니다. 데이터 관리 메커니즘을 이해하는 것은 효율적이고 유지 관리 가능한 VUE 응용 프로그램을 작성하는 데 핵심입니다. Vue의 반응 형 시스템을 우회하려고하지 마십시오. 이것은 단단하기가 어려운 일뿐입니다.

위 내용은 VUE의 내보내기 기본 내보내기 데이터를 수정할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!