Vueデータ監視の原理の詳細な説明

<本文>
    <div id="ルート">
        <h1>学生の基本情報</h1>
        <button @click="student.age++">年齢+1歳</button>
        <button @click="addSex">性別属性を追加します。デフォルト値は男性です</button><br>
        <button @click="student.sex='unknown' ">プロパティ値を変更する</button><br>
        <button @click="addFriend">リストの一番上に友達を追加します</button><br>
        <button @click="updateFriend">最初の人の名前を更新</button><br>
        <button @click="addHobby">趣味を追加</button><br>
        <button @click="change">最初の趣味を登山に変更</button><br>
        <button @click="removeSmoke">煙をフィルターで除去</button><br>
        <h3>名前: {{student.name}}</h3>
        <h3>年齢: {{student.age}}</h3>
        <h3 v-if="student.sex">性別: {{student.sex}}</h3>
        <h3>趣味:</h3>
        <時間>
        <ul>
            <li v-for="(h,index) in student.hobby" :key="index">{{h}}</li>
        </ul>
        <時間>
        <h3>友達:</h3>
        <ul>
            <li v-for="(f,index) in student.friends" :key="index">{{f.name}}--{{f.age}}</li>
        </ul>
    </div>
    <スクリプト>
        Vue.config で productionTip を false に設定します。
        定数vm = 新しいVue({
            el: "#root",
            データ： {
                学生：
                    名前: 'zhang',
                    年齢: 18歳
                    趣味: ['飲酒', '喫煙', 'パーマ'],
                    友達： [{
                        名前: 'li',
                        年齢: 15
                    }, {
                        名前: '王',
                        年齢: 10
                    }]
                }
            },
            メソッド: {
                セックスを追加します（）{
                    this.$set(this.student, '性別', '男性')
                        // Vue.set(vm.student, '性別', '男性')
                },
                友達を追加します（）{
                    this.student.friends.unshift({
                        名前: 'YY',
                        年齢: 66
                    })
                },
                アップデートフレンド() {
                    this.student.friends[0].name = "シャオ・リウ";
                    この学生の友達[0].年齢 = 22
                },
                趣味を追加します（）{
                    this.student.hobby.push('歌うこと')
                },
                変化（） {
                    //スプライスの追加は、0番目から始めて1つ削除し、新しく追加された値が登ることを意味します //注: 配列の添え字形式を介して直接変更することはできません //this.student.hobby.splice(0, 1, 'climbing')
                    //Vue.set(this.student.hobby, 0, '登山')
                    this.$set(this.student.hobby, 0, '登山')
                },
                煙を削除します（）{
                    //フィルターは元の配列の変更には影響しません this.student.hobby = this.student.hobby.filter((h) => {
                        h !== '喫煙' を返す
                    })
                }
            }
        })
    </スクリプト>
</本文>