VueJ를 사용하여 객체의 여러 소품을 업데이트할 때 어떻게 반응성을 유도합니까?

VueJ를 사용하여 객체의 여러 소품을 업데이트할 때 어떻게 반응성을 유도합니까?

돔의 일부가 입력에 제대로 반응하지 않는 앱을 만드는 동안 이상한 행동을 목격했습니다.돌연변이가 등록되고 상태가 변화하고 있었지만 DOM의 소품은 그렇지 않았습니다.다시 돌아왔을 때 html의 새로운 공백 행 하나를 편집하여 새로운 소품을 표시하고 있는 것을 알 수 있었습니다.그러나 문서를 편집, 저장, 저장한 후 다시 돌아가서 상태에 대한 새로운 변경 사항을 확인해야 합니다.

그래서 상태가 업데이트되고 있었지만 Vue는 변화에 반응하지 않았습니다.그 이유는 다음과 같습니다.https://vuejs.org/v2/guide/reactivity.html#For-Objects

Vue가 속성 추가 또는 삭제를 감지할 수 없습니다.Vue는 인스턴스 초기화 중에 getter/setter 변환 프로세스를 수행하므로 Vue가 데이터 개체를 변환하여 비활성화하려면 데이터 개체에 속성이 있어야 합니다.

경우에 따라서는 Object.assign() 또는 _.extend()를 사용하여 기존 개체에 여러 속성을 할당할 수도 있습니다.그러나 개체에 추가된 새 속성은 변경을 트리거하지 않습니다.이 경우 원래 개체와 mixin 개체 모두에서 속성을 가진 새 개체를 만듭니다.

는 내내 of of of 의 입니다.js-libp2p으로.libp2p stateinstance에서 합니다.으로써 이 있었습니다.

syncNode(state, libp2p) {
    state.p2pNode = libp2p
}

서 ★★★★★libp2p는, DOM 를 가 입니다.state.p2pNode사용할 수 없습니다.$set값을 편집하기 위한 으로, 1개의 값을 편집하다라고 .assign ★★★★★★★★★★★★★★★★★」.extend오브젝트 트리 전체를 교환하려고 하기 때문에 동작하지 않습니다.

왜 이런 제한이 있고 이 문제에 대한 해결책이 있나요?

Vuex 한 것은 " " 입니다.state미리 신고해 두는 것입니다.

전체 값을 덮어쓰더라도 해당 항목이 개체인지 또는 다른 변수 유형인지는 중요하지 않습니다..set는 객체 속성 를 검출할 수 합니다.state는 객체입니다.이것은 불필요합니다.

Vue.set(state, 'p2pNode', libp2p);

에도 '어울리다'를 올바르게 가 있을 것입니다.p2pNode이치노Vuex v초 / Vuex v v v v v 。

state: {
  p2pNode: null  // or whatever initialization value makes the most sense
}

여기 증거용 데모가 있습니다.아마도 Vuex 값을 반응적으로 사용하지 않은 것이 문제일 것입니다.

저는 당신의 문제가 새로운 부동산의 할당에 대한 기본 규칙보다 더 복잡하다고 생각합니다.그러나 이 답변의 전반부는 기본 규칙을 다루고 있습니다.

또한 Vue가 반응하는 개체에 새 속성을 올바르게 할당하는 방법에 대해 몇 가지 제한이 있는 이유를 설명하려면 Vue는 언어의 성능 및 제한과 관련이 있을 수 있습니다.이론적으로 Vue는 새로운 속성을 찾기 위해 반응형 개체를 계속 이동할 수 있지만 성능이 저하될 수 있습니다.

중요한 것은 Vue 3의 새로운 컴파일러가 이 문제를 더 쉽게 처리할 수 있다는 것입니다.그때까지 대부분의 경우 올바른 해결책을 제공하기 위해 링크한 문서(아래 예 참조)가 제공되었습니다.

var app = new Vue({
  el: "#app",
  data() {
    return {
      foo: {
        person: {
          firstName: "Evan"
        }
      }
    };
  },
  methods: {
    syncData() {
      // Does not work
      // this.foo.occupation = 'coder';

      // Does work (foo is already reactive)
      this.foo = {
        person: {
          firstName: "Evan"
        },
        occupation: 'Coder'
      };

      // Also works (better when you need to supply a 
      // bunch of new props but keep the old props too)
      // this.foo = Object.assign({}, this.foo, {
      //  occupation: 'Coder',
      // });      
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  Hello {{foo.person.firstName}} {{foo.occupation}}!
  <button @click="syncData">Load new data</button>
</div>

단: 단.Vuex의 설명이기 때문에 대부분의 경우 저보다 나을 수 있습니다.했을 때 것을 하면, 나는 당신이 그의 솔루션을 사용할 때 당신의 코드가 아직 작동하지 합니다.p2pNode(Vuex는 그 오브젝트 내의 모든 돌연변이가 공식 커밋을 거치는 것을 기대하고 있습니다).훅이 「」등).libp2p.on('peer:connect'이런 경우라면 놀라지 않을 것입니다.뒤에서 조용히 자신을 변형시키는 노드에서 완벽한 반응성을 얻으려고 머리를 쥐어뜯을 수도 있습니다.

는 "libp2p" no"를 하지 않습니다.libp2p.on('update')이를 통해 Vuex에게 변경을 알릴 수 있습니다.그러면 기본적인 게임 상태 루프를 구현하고 Vue에게 잠시 수면 후 모든 것을 자주 재계산하도록 지시할 수 있습니다.https://stackoverflow.com/a/40586872/752916 및 https://stackoverflow.com/a/39914235/752916 를 참조해 주세요.이것은 약간의 해킹이지만(적어도 정보에 입각한 사람), 당신이 이 가시 돋친 버그를 해결할 때까지 단기적으로 당신의 삶을 훨씬 더 편하게 할 수 있을 것이고, 깜박임도 없어야 한다.

libp2p에 대해서는 아무것도 모르지만 업데이트 시 변경되는 데이터 옵션에서 변수를 선언해 본 적이 있습니까?

data: {
    updated: ''
  }

값을 할당합니다.

syncNode(state, libp2p) {
    this.updated = state
    state.p2pNode = libp2p
}

언급URL : https://stackoverflow.com/questions/60983519/how-to-induce-reactivity-when-updating-multiple-props-in-an-object-using-vuejs