时间戳

首页 > 解决方案 > 如果未在数据中声明此值，为什么它是反应性的？

javascript - 如果未在数据中声明此值，为什么它是反应性的？

问题描述

我需要将一些值存储在 Vue 组件beforeCreate挂钩中，稍后在beforeDestroy. 问题是（或者至少我是这么理解的）beforeCreate钩子还没有访问响应式的权限data。

因为除了 in 之外我在任何地方都不需要这些值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在向in添加数据时，我应该考虑任何可能的次要影响beforeCreate吗？

标签： javascriptvue.jsscopevuejs2

解决方案

反应性是与this.msg，而不是this.value

您的困惑似乎来自对 Vue 在响应式数据更改时如何更新 DOM 的误解：

您似乎认为，如果您更改this.msg，那么 Vue 会选择性地仅更新 DOM 中使用的那些部分msg。事实并非如此。

真正发生的是这样的：

  1. 当模板的任何响应式依赖项（此处为：）发生更改时，整个this.msg组件的 virtualDOM 将被重新渲染。
  2. 这意味着在这个过程中，{{ value }}正在重新评估，并且由于您也更改了它，它的新值现在是新 virtualDOM 的一部分。
  3. 然后 Vue 对新旧 virtualDOM 进行比较，并用它发现的任何更改修补真实 DOM。
  4. 由于您更改了{{ msg }}and {{ value }}，因此<div>包含这些引用的两个元素都将使用新内容进行修补。

所以你会看到this.value它本身不是响应式的——但是如果你改变它并且同时做出响应式的改变，新的值将被包含在组件的更新中。

要查看这this.value不是反应性的，只需注释掉以下更改this.msg：

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

推荐阅读