vue 赋值后视图未更新

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

解决方案：

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

<script>
export default {
 data() {
   return {
     student: {
       name: '张三',
     }
   }
 },
 methods: {
   setMessage() {
　　　// Vue.$set(obj, key, value) 
　　　// obj: 要更改的数据源（可以是一个对象或者数组）
　　　// key 要更改的具体数据 （索引）
　　　// value 重新赋的值
     this.$set(this.student, 'name', '李四');
   }
 }
}
</script>

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

<script>
export default {
  data() {
    return {
      student: {
        name: '张三',
      }
    }
  },
  methods: {
    setMessage() {
      this.student.name= '李四'
      this.student = Object.assign({}, this.student);
    }
  }
}
</script>