vue 解决视图未更新数据的几种方式

比如给data中的对象添加属性时候，在控制台发现该对象身上已经有了属性，但是视图层并没有更新数据。

原因是因为受JS限制，vue不能监听对象属性的添加/删除等操作，在vue组件初始化的过程中，会调用getter和setter方法，所以该属性必须是存在data中，视图层才会响应该数据的变化。（也就是说vue实例已经创建了，数据也都挂载在上面了，这个时候在给一个对象增加新的属性是不可以的）

解决方式大概有两种：

1、使用vue.$set

this.$set(target, key, value)/vue.set(target, key, value)

target：要更改的数据源（可以是对象或数组）

key：要更改的具体数据

value：重新赋的值

返回值为设置的值

<script>
export default {
 data() {
   return {
     place: {
       name: '南锣鼓巷',
     }
   }
 },
 methods: {
   setMessage() {
     this.$set(this.place, 'age', 10)
     console.log(this.place)
   }
 }
}
</script>

 

2、使用Object.assign(target, sources)方法

<script>
export default {
  data() {
    return {
      place: {
        name: '南锣鼓巷',
      }
    }
  },
  methods: {
    setMessage() {
      this.place.age = 15
      this.place = Object.assign({}, this.place)
      console.log(this.place)
    }
  }
}
</script>