如果没有在数据中声明,为什么这个值会被反应？

Question

我需要将一些值存储在beforeCreate稍后我需要的Vue Component 钩子中beforeDestroy.事情是(或者至少是我所理解的)beforeCreate钩子无法获得被动反应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. 有没有将数据添加到时候我应该考虑任何可能的二次效应this的beforeCreate？

Answer 1

反应性是this.msg,而不是this.value

您的困惑似乎来自于对反应数据更改时Vue如何更新DOM的误解:

您似乎认为,如果您更改this.msg,则Vue将有选择地仅更新msg使用的DOM的那些部分.事实并非如此.

真正发生的是:

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... (?)";