this.$set(obj, key, value)
我們在項(xiàng)目開發(fā)的過程中，經(jīng)常會遇到這種情況：為data中的某一個(gè)對象添加一個(gè)屬性

<template>
  <div class="hello">
    <button @click="setMessage">添加屬性</button>
    {{ student.name }}
    <input type="text" v-model="student.age">
  </div>
</template>

<script>
export default {
  data() {
    return {
      student: {
        name: '張三',
      }
    }
  },
  methods: {
    setMessage() {
      this.student.age = 15
      console.log(this.student)
    }
  }
}
</script>

當(dāng)我們點(diǎn)擊按鈕，為student添加一個(gè)age屬性，看看視圖層是否能夠更新

2019091914300756.png

在這里我們發(fā)現(xiàn)雖然這個(gè)對象身上已經(jīng)有了該屬性，但是視圖層并沒有更新該數(shù)據(jù)，是什么造成的呢？由于受JavaScript的限制，vue.js不能監(jiān)聽對象屬性的添加和刪除，因?yàn)樵趘ue組件初始化的過程中，會調(diào)用getter和setter方法，所以該屬性必須是存在在data中，視圖層才會響應(yīng)該數(shù)據(jù)的變化

那么，我們該如何解決這個(gè)問題呢
解決這個(gè)問題的方法大體有兩種：
1、使用this.$set(obj, key, value)/vue.set(target, key, value)
target: 要更改的數(shù)據(jù)源（可以是一個(gè)對象或者數(shù)組）
key 要更改的具體數(shù)據(jù) （索引）
value 重新賦的值

<script>
export default {
 data() {
   return {
     student: {
       name: '張三',
     }
   }
 },
 methods: {
   setMessage() {
     this.$set(this.student, 'age', 15)
     console.log(this.student)
   }
 }
}
</script>

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

<script>
export default {
  data() {
    return {
      student: {
        name: '張三',
      }
    }
  },
  methods: {
    setMessage() {
      this.student.age = 15
      this.student = Object.assign({}, this.student)
      console.log(this.student)
    }
  }
}
</script>

20190919145704977.png

轉(zhuǎn)自https://blog.csdn.net/hhkongbai/article/details/101022019