Detaillierte Erläuterung des Prinzips der Vue-Überwachungsdaten

<Text>
    <div id="Wurzel">
        <h1>Grundlegende Informationen zum Studierenden</h1>
        <button @click="student.age++">Alter+1 Jahr</button>
        <button @click="addSex">Geschlechtsattribut hinzufügen. Der Standardwert ist männlich</button><br>
        <button @click="student.sex='unknown' ">Eigenschaftswert ändern</button><br>
        <button @click="addFriend">Einen Freund oben in der Liste hinzufügen</button><br>
        <button @click="updateFriend">Den Namen der ersten Person aktualisieren</button><br>
        <button @click="addHobby">Hobby hinzufügen</button><br>
        <button @click="change">Ändern Sie das erste Hobby auf Bergsteigen</button><br>
        <button @click="removeSmoke">Rauch herausfiltern</button><br>
        <h3>Name: {{student.name}}</h3>
        <h3>Alter: {{student.age}}</h3>
        <h3 v-if="student.sex">Geschlecht: {{student.sex}}</h3>
        <h3>Hobbys:</h3>
        <hr>
        <ul>
            <li v-for="(h,index) in student.hobby" :key="index">{{h}}</li>
        </ul>
        <hr>
        <h3>Freunde:</h3>
        <ul>
            <li v-for="(f,index) in student.friends" :key="index">{{f.name}}--{{f.age}}</li>
        </ul>
    </div>
    <Skript>
        Vue.config.productionTip = falsch;
        const vm = neuer Vue({
            el: "#root",
            Daten: {
                Student:
                    Name: 'zhang',
                    Alter: 18,
                    Hobby: ['Trinken', 'Rauchen', 'Dauerwelle'],
                    Freunde: [{
                        Name: 'li',
                        Alter: 15
                    }, {
                        Name: 'wang',
                        Alter: 10
                    }]
                }
            },
            Methoden: {
                Geschlecht hinzufügen() {
                    dies.$set(dieser.student, 'Geschlecht', 'männlich')
                        // Vue.set(vm.student, „Geschlecht“, „männlich“)
                },
                Freund hinzufügen() {
                    diese.Studentenfreunde.unshift({
                        Name: 'YY',
                        Alter: 66
                    })
                },
                updateFreund() {
                    diese.student.friends[0].name = "Xiao Liu";
                    diese.Studentenfreunde[0].Alter = 22
                },
                addHobby() {
                    this.student.hobby.push('Singen')
                },
                ändern() {
                    // Splice-Addition bedeutet, bei 0 zu beginnen, 1 zu löschen und der neu hinzugefügte Wert zu klettern. // Hinweis: Kann nicht direkt über die Array-Indexform geändert werden. // this.student.hobby.splice (0, 1, „climbing“)
                    //Vue.set(this.student.hobby, 0, 'Klettern')
                    this.$set(this.student.hobby, 0, 'Bergsteigen')
                },
                entferneRauch() {
                    //Filter hat keinen Einfluss auf die Änderung des ursprünglichen Arrays this.student.hobby = this.student.hobby.filter((h) => {
                        return h !== 'Rauchen'
                    })
                }
            }
        })
    </Skript>
</body>