Vue:增加新反应属性的不同选项？

Question

我试图理解添加反应属性的不同方法。我知道我不能直接向根级别添加属性，所以我在数据中设置了一个< code>user对象:

data() {
   return {
       user: {
       }
   }
}

从这里开始，我就感到困惑了，因为文档说使用Vue.set是向对象添加新的反应性属性的方法，所以在这个例子中：Vue.set（this.user，'first_name'，'Bob'）

但是，我尝试了一种不同的方法，制作了一个触发方法的按钮，并在其中执行了以下操作:

testFunc() {
    let names = ["Bob", "Vin", "Mark"]
    this.user.test_property = names[Math.floor(Math.random() * names.length];
}

这奏效了。我在 Vue Dev 工具中进行了测试，看到属性test_property添加到对象中，并在每次单击按钮时对其进行更改。如果 Vue.set（） 是创建新的反应式属性的唯一方法，为什么会这样呢？

最后，我注意到如果我执行下面的<代码>

Answer 1

当然this.user.test_property可以将属性test_property添加到对象。但是这个属性不是反应性的。

new Vue({
  el: '#app',
  data() {
    return {
      user: {}
    }
  },
  created() {
    this.user.name = 'a name'
  },
  methods: {
    changeName () {
      this.user.name = 'b name'
    },
    changeAge () {
      this.user.age = '23'
    }
  }
})

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

<div id="app">
  <p>{{ user.name }}</p>
  <input v-model="user.age" />

  <button @click="changeName">click me to change name</button>
  <button @click="changeAge">click me to change age</button>
</div>

Answer 2

看起来您正在使用带有选项api的Vue v2。在这种情况下，您只需执行＜code＞即可。property_name=value 并从模板访问它。