왜 마운트에 반응 요소를 추가 할 수 있습니까?

Question

Reactivity in Depth에 대한 설명서는 이미 만든 인스턴스에 새로운 루트 수준 반응 특성을 추가 할 수없는 이유와 실제로 this.$set()을 통해 추가하는 방법을 설명합니다.

이 경우 인스턴스가 초기화 된 후 처음 비어있는 객체를 마운트시에 업데이트 (및 대응) 할 수있는 이유는 무엇입니까? 초기화 부분에 마운트가 포함되어 있습니까? 마운트 후

new Vue({ 
 
    el: "#app", 
 
    data: { 
 
    myobject: {} 
 
    }, 
 
    mounted() { 
 
    setTimeout(() => { 
 
     this.myobject = { 
 
     "x": 1 
 
     } 
 
    }, 2000) 
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.11/vue.js"></script> 
 
<div id="app"> 
 
    {{myobject}} 
 
</div>

직접 추가 수정은 설명서 (작동하지 않을 것입니다 예를 들어 this.myobject.y = 2 반면에 맞춰, 고려되지 않습니다 (하지만 그것은 initalization 후 mount an instance manually 가능하다) this.$set(this.myobject, "y", 2))

Answer 1

myobject에 속성을 추가하지 않아서 샘플의 코드가 변경 감지 경고에 포함되지 않습니다. myobject에서 완전히 새로운 객체. Vue는 객체 참조 변경을 감지하는 데 아무런 문제가 없습니다.

Vue가 감지 할 수없는 것은 이미 존재하지 않는 개체에 속성을 추가하는 것입니다. 예를 들면 다음과 같습니다.

mounted() { 
    setTimeout(() => { 
    this.myobject.someNewProperty = "some value" 
    }, 2000) 
} 

Vue는 변경 사항을 감지하지 못합니다. 다음은 개체가 변경된 후 DOM이 변경되지 않는다는 것을 보여주기 위해 업데이트 된 예제입니다. 이

이 뷰가 이미 생성 된 인스턴스에 새로운 루트 수준의 반응 속성을 추가하는 동적 허용하지 않습니다 말할 때 문서가 의미

new Vue({ 
 
    el: "#app", 
 
    data: { 
 
    myobject: {} 
 
    }, 
 
    mounted() { 
 
    setTimeout(() => { 
 
     this.myobject.someNewProperty = "some value" 
 
    }, 2000) 
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.11/vue.js"></script> 
 
<div id="app"> 
 
    {{myobject}} 
 
</div>

.

Vue 인스턴스를 만든 후에는 데이터 개체에 다른 속성을 추가 할 수 없습니까? 예를 들어,이 코드 : 경고에

var vm = new Vue({ 
 
    el: "#app", 
 
    data: { 
 
    myobject: {} 
 
    }, 
 
    mounted() { 
 
    setTimeout(() => { 
 
     this.$set(vm.$data, 'newRootLevelProperty', "some value") 
 
    }, 2000) 
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.11/vue.js"></script> 
 
<div id="app"> 
 
    {{myobject}} 
 
</div>

결과

[뷰 경고] : 런타임시 뷰 인스턴스 또는 루트 $ 데이터에 반응 특성을 추가하지 마십시오 - 데이터 옵션에서 선행 적으로 선언하십시오.

하지만 당신은 만큼 당신이을 설정 $ 사용으로 중첩 된 객체에 (예 : myobject로) 속성을 추가 할 수 있습니다.