VUE 數據變化頁面不加載（數組重新賦值不渲染）

當vue中data里聲明或者已經賦值過的對象、數組時，向對象中添加新的屬性，如果更新此屬性的值，頁面不會更新視圖。

舉個栗子：當我點擊按鈕想要改變message中的值時

此時當我點擊按鈕，頁面並不會發生改變。

官方定義：如果在實例創建之后添加新的屬性到實例上，它不會觸發視圖更新。　

Vue官方文檔給我們提供了兩種方法：Vue.set()和this.$set()

兩種方法作用一樣，參數也是一致的。

區別：Vue.set 可以設置實例創建之后添加的屬性，而this.$set只能設置實例創建后存在的屬性

<template>
 <div id="app">
  <p v-for="item in items" :key="item.id">{{item.message}}</p>
  <button class="btn" @click="handClick()">更改數據</button>
 </div>
</template>
 
<script>
export default {
 name: 'App',
 data () {
  return {
   items: [
        { message: "one", id: "1" },
        { message: "two", id: "2" },
        { message: "three", id: "3" }
      ]
  }
 },
 mounted () {
   this.items[0] = { message:'first',id:'4'} //此時對象的值更改了，但是視圖沒有更新
  // let art = {message:'first',id:"4"}
  // this.$set(this.items,0,art) //$set 可以觸發更新視圖
 },
 methods: {
  handClick(){
   let change = this.items[0]
   change.message="shen"
   this.$set(this.items,0,change)
  }
 }
}
</script>
 
<style>
 
</style>

 

 

調用方法: Vue.set( target , key , value)

• target: 要更改的數據源（可以是一個對象或者數組）
• key 要更改的具體數據 （索引）
• value 重新賦的值