为什么在 vue 2 中挂载后数据发生变化？

Question

<template>
  <div>
    {{testData.first}}
    <!-- The screen shows the value set by mounted. -->
  </div>
</template>
<javascript>
export default {
  data(){
    return {
      testData: {}
    }
  },
  mounted(){
    this.testData.first = 'hello';
  }
}
</javascript>

我了解到在'vue'的生命周期调用mounted时，data已经定义好了。我没有定义 testData 的属性。我最初没有在调用mounted时设置testData的属性，所以我认为必须是空值时可见屏幕。当然，我已经知道 testData 不是反应性数据。请解释为什么会出现这种现象。可能是我没看懂Vue

Answer 1

Of course, I've already known testData isn't reactivity data.

testData 是反应式的，因为它是你声明的。但是 testData.first 不是，因为它 NOT 你声明的。所以你告诉 Vue testData 是一个反应式 object，但是你改变了一个 non-existent 属性，它是一个完全不同的故事。

因此，如果您将其声明为反应式 object，则必须给它一个 object，这是完全合理的。否则，如果你想给它一个属性，你必须告诉 Vue。这可以在 Vue $set.

的帮助下完成

const app = new Vue({
  el: "#app",
  data() {
    return {
      testData: {}
    }
  },
  template: `<div>{{testData.first}}</div>`,
  mounted() {
    this.testData = {
      'first': 'hello'
    }; 
    //this.$set(this.testData, 'first', 'hello'); //either will work
  }
});

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

这是使用古老的 VueJS 2 带来的不便。VueJS 3 已经删除了 $set (doc) 并解决了这个问题。所以我对你的代码在 Vue 3 上运行良好抱有很高的期望

为什么在 vue 2 中挂载后数据发生变化？

Why data changed after mounted in vue 2?

vue.js