this.setの正しい使い方

this.#set(obj, キー, 値)

プロジェクト開発では、このような状況によく遭遇します：データ中のオブジェクトに属性を追加する

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

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

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

ボタンをクリックしたら、studentにage属性を追加して、ビューレイヤーを更新できるかどうか確認する

ここで、オブジェクトにはすでにそのプロパティがあるにもかかわらず、ビュー層はそのデータで更新されていないことがわかりますが、何が原因でしょうか？JavaScriptの制限により、vue.jsはオブジェクトのプロパティの追加と削除をリスニングすることができません。

では、この問題を解決するにはどうすればよいのでしょうか。
この問題を解決するには、大きく分けて2つのアプローチがあります。

1. this.$set(obj, key, value)/vue.set(obj, key, value)を使用します。

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

1. Object.assign(target,sources)メソッドによるものです。

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

この2つの方法でオブジェクトにプロパティを追加した後、彼はオブジェクトに多くのgetとsetメソッドを持っているので、再びプロパティを操作すると、ビューが更新されることになることがわかります。