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>