Vue中为对象添加属性没有更新到视图当中，但是通过Vue devtools 数据会发生变化

我们在项目开发的过程中，经常会遇到这种情况：为data中的某一个对象添加一个属性，该对象已经有了这个属性，但是视图层上input输入框并没有更新，为什么？

下面代码.png

<template>
  <div class="hello">
    <button @click="setMessage">添加属性</button>
    {{ student.name }}
    <input type="text" v-model="student.age" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      student: {
        name: "李四",
      },
    };
  },
  methods: {
    setMessage() {
      this.student.age = 15;
    },
  },
};
</script>

由于受JavaScript的限制，vue.js不能监听对象属性的添加和删除，因为在vue组件初始化的过程中，会调用getter和setter方法，所以该属性必须是存在在data中，视图层才会响应该数据的变化。

解决方法：

1.把age属性添加到student对象中

  data() {
    return {
      student: {
        name: "李四",
        age:""   //在这里添加一个age属性就可以正常更新到视图中
      },
    };
  }

2.在setMessage方法中把整个对象赋值给到student对象中

  methods: {
    setMessage() {
      let newStudent = { name: "李四", age: 15 };
      this.student = newStudent ;
      console.log(this.student);
    },
  }

3.使用this.$set(obj, key, value)/vue.set(obj, key, value)

  methods: {
    setMessage() {
      this.$set(this.student, 'age', 15);
      console.log(this.student);
    },
  }

4.通过Object.assign(target, sources)方法

(也是通过对象拷贝赋值，跟第二种方法一样)

 methods: {
   setMessage() {
     this.student.age = 15;
     this.student = Object.assign({}, this.student);
     console.log(this.student);
   },
 }

此时点击按钮就有了

第三种和第四种方法此时age多了get和set方法，所以此时我们再次操作该属性的时候，就会引起视图的更新啦