$set

你在vue開發中有沒有遇見過 模型資料改變了 但是檢視沒有發生改變的情況 是怎麼解決這個問題的？

出現的場景

當vue的data裡邊宣告或者已經賦值過的物件或者陣列（數組裡邊的值是物件）時，向物件中新增新的屬性，如果更新此屬性的值，是不會更新檢視的。

<template>
  <div class="hello">
    <h1>$set</h1>
    你在vue開發中有沒有遇見過 模型資料改變了  但是檢視沒有發生改變的情況  是怎麼解決這個問題的？
    <h1>{{arr.name}}-----{{arr.age}}</h1>
    <button @click="fun()">點我新增一個age</button>
  </div>
</template>
​
<script>
export default {
  data(){
   return {
    arr:{
     name:"xixi"
    }
   }
  },
  methods:{
   fun(){
​
    this.arr.age=18
    console.log(this.arr.age)
   }
  },
  name: 'HelloWorld',
  props: {
   msg: String
  }
}
</script>
​
​
<style >
​
</style>
​
 

出現這種情況的原理

官方這樣說：

當你把一個普通的 JavaScript 物件傳入 Vue 例項作為 data 選項，Vue 將遍歷此物件所有的屬性，並使用 Object.defineProperty 把這些屬性全部轉為 getter/setter。 受現代 JavaScript 的限制 (以及廢棄 Object.observe)，Vue 不能檢測到物件屬性的新增或刪除。由於 Vue 會在初始化例項時對屬性執行 getter/setter 轉化過程，所以屬性必須在 data 物件上存在才能讓 Vue 轉換它，這樣才能讓它是響應的。

簡單點來解釋：

Object.defineProperty只會在初始化的時候監聽data模型資料 如果中途加入新的物件屬性 那麼這個方法就不會監聽到 不監聽也就沒有了雙向繫結 沒有了雙向繫結就不會有模型變了檢視發生改變這一說

解決問題

$set()

<template>
  <div class="hello">
    <h1>$set</h1>
    你在vue開發中有沒有遇見過 模型資料改變了  但是檢視沒有發生改變的情況  是怎麼解決這個問題的？
    <h1>{{arr.name}}-----{{arr.age}}</h1>
    <button @click="fun()">點我新增一個age</button>
  </div>
</template>
​
<script>
export default {
  data(){
   return {
    arr:{
     name:"xixi"
    }
   }
  },
  methods:{
   fun(){
​
    // this.arr.age=18
    // this.$set(要操作的資料,新增的內容,值)
    this.$set(this.arr,"age",19)
    console.log(this.arr.age)
   }
  },
  name: 'HelloWorld',
  props: {
   msg: String
  }
}
</script>
​
​
<style scoped>
​
</style>
​
 

本文來自部落格園，作者：{Teil}}，轉載請註明原文連結：https://www.cnblogs.com/user-001/p/15632670.html