데이터에 선언되지 않은 이 값은 왜 반응성이 있는가?

데이터에 선언되지 않은 이 값은 왜 반응성이 있는가?

Vue 구성 요소에 값을 저장해야 하는 경우beforeCreate나중에 내가 요구할 훅beforeDestroy. 중요한 것은 (아니면 적어도 내가 이해한 것은 그런 것)beforeCreate훅이 반응성(reactive)에 접근할 수 없음data아직까지는

이 값들은 어디에도 필요없으니까beforeDestroy난 그들이 반응하지 않는 것을 개의치 않아, 그래서 난 그것에 대해 잘 알아.하지만 마지막에 내가 시도했을 때:

Vue.component('my-component', {
  data: function() { return { msg: "I'm a reactive value." }},
  template: '<div><div>{{ msg }}</div> <div>{{value}}</div> <button @click="onClick">Click Me</button></div>',
  beforeCreate: function() { this.value = "I was declared before data existed." },
  methods: {
    onClick: function(event) {
      this.msg += " So, I respond to changes.";
      this.value += " But I'm still reactive... (?)";
    }
  }
});

var app = new Vue({
  el: '#app',
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <my-component />
</div>

결국 그 가치는 반응하는 것 같군...

1. 내가 뭘 놓쳤지?
2. 데이터를 추가할 때 고려해야 할 2차적 효과가 있는가?this에beforeCreate?

반응성은 다음과 같다.this.msg아닌this.value

귀하의 혼란은 사후 대응 데이터가 변경될 때 Vue가 DOM을 업데이트하는 방법에 대한 잘못된 생각에서 비롯된 것으로 보인다.

넌 그렇게 생각하는 것 같아, 만약 네가 바뀌면.this.msg, 그러면 Vue는 선택적으로 DOM의 그 부분들만을 업데이트 할 것이다.msg사용되었다.그렇지 않다.

실제로 일어나는 일은 다음과 같다.

1. 템플릿의 사후 대응적 종속성(여기서:this.msg) 변경사항, 전체 구성요소에 대한 virtualDOM이 다시 렌더링되고 있다.
2. 이 과정에서{{ value }}재평가되고 있고, 당신도 그것을 바꿨기 때문에, 그것의 새로운 가치는 이제 새로운 virtualDOM의 일부가 되었다.
3. 그런 다음 Vue는 이전과 새로운 virtualDOM을 분리하고 실제 DOM을 발견한 변경사항으로 패치한다.
4. 네가 둘 다 바꾼 이후로{{ msg }}그리고{{ value }}, 양쪽 모두<div>이러한 참조를 포함하는 요소는 새로운 내용으로 패치될 것이다.

그렇구나this.value그 자체는 반응적이지 않지만, 만약 당신이 그것을 변화시키고 또한 그것과 함께 반응적인 변화를 한다면, 새로운 가치는 구성 요소의 업데이트에 포함될 것이다.

그것을 보기 위해서.this.value반응적이지 않다. 단지 다음에 대한 변화만 언급하라.this.msg:

// this.msg += " So, I respond to changes.";
this.value += " But I'm still reactive... (?)";

참조URL: https://stackoverflow.com/questions/51674011/why-is-this-value-reactive-if-its-not-declared-in-data