This.$set() in Vue wird verwendet, um das Problem zu lösen, dass die Seite nach der Aktualisierung der Daten nicht aktualisiert wird, da die bidirektionale Datenbindung in Vue2 über ein Objekt erfolgt.defineproperty Implementiert durch a>(). Durch die get- und set-Methoden wird get ausgelöst, wenn es abgerufen wird, und set wird ausgelöst, wenn es geändert wird. Es gibt jedoch keine Möglichkeit, beim Löschen und Hinzufügen von Objektattributen und beim Ändern von Daten basierend auf Array-Indizes eine Reaktionsfähigkeit zu erreichen. Es wird im Allgemeinen durch this.$set gelöst, und es gibt auch eine entsprechende this.$delete-Implementierung zum Löschen.
1. Verwenden Sie this.$set(), um die Reaktionsfähigkeit beim Hinzufügen und Löschen von Objektattributen zu lösen
Originalcode:
<template>
<div>
<div>{
{ obj }}</div>
<button @click="changObj">更改obj</button>
</div>
</template>
<script>
export default {
data(){
return{
obj:{name:'皮卡丘'},
newObj:{}
}
},
methods:{
changObj(){
this.obj.age=17
console.log(this.obj);//{ "name": "皮卡丘","age": 17}
}
}
}
</script>
<style>
</style>Sie werden feststellen, dass sich die Objekteigenschaften geändert haben, die Seite jedoch nicht aktualisiert wurde. Wenn wir die Konsole öffnen, finden wir Folgendes:
Sie werden feststellen, dass das Namensattribut die Form (...) hat, der neu hinzugefügte Wert jedoch nicht so ist. Warum ist das so? Was hat das mit Reaktionsfähigkeit zu tun? Tatsächlich ist es sehr einfach. Der Grund dafür ist, dass während der Ausführung von Vue die Eigenschaften in den Daten rekursiv bearbeitet werden und jede Eigenschaft als Objekt übergeben wird.defineproperty () Fügen Sie Get- und Set-Methoden hinzu, um Reaktionsfähigkeit zu erreichen. Da unser Name das ursprüngliche Attribut des Objekts ist, gibt es Get- und Set-Methoden. (...) Sie können den Wert des Namensattributs anhand sehen Klicken Sie darauf. Der Klickvorgang löst die Get-Methode des Namens aus. Unsere neu hinzugefügten Attribute wurden nicht von Vue verarbeitet, daher gibt es keine Get- und Set-Methoden. Das heißt, es gibt keine Reaktionsfähigkeit. Wir können es verarbeiten this.$set()-Methode zum Erstellen der neuen Attribute Sie ist reaktionsfähig und ihr Prinzip besteht darin, Set- und Get-Methoden an neu hinzugefügte Attribute zu binden. Fügen Sie dem reaktiven Objekt eine Eigenschaft hinzu und stellen Sie sicher, dass die neue Eigenschaft ebenfalls reagiert und eine Ansichtsaktualisierung auslöst.
Code nach der Transformation:
<template>
<div>
<div>{
{ obj }}</div>
<button @click="changObj">更改obj</button>
</div>
</template>
<script>
export default {
data(){
return{
obj:{name:'皮卡丘'},
newObj:{}
}
},
methods:{
changObj(){
this.$set(this.obj,'age',17)
console.log(this.obj);//{ "name": "皮卡丘","age": 17}
}
}
}
</script>
<style>
</style>Öffnen Sie die Konsole erneut und Sie werden Folgendes finden:
Alle reagieren.
Das Gleiche gilt für das Löschen von:
<template>
<div>
<div>{
{ obj }}</div>
<button @click="changObj">更改obj</button>
</div>
</template>
<script>
export default {
data(){
return{
obj:{name:'皮卡丘'},
newObj:{}
}
},
methods:{
changObj(){
delete this.obj.name
console.log(this.obj);//{}
}
}
}
</script>
<style>
</style>Die Seite wird nicht aktualisiert, wenn sich die Daten ändern.
Code nach der Transformation:
<template>
<div>
<div>{
{ obj }}</div>
<button @click="changObj">更改obj</button>
</div>
</template>
<script>
export default {
data(){
return{
obj:{name:'皮卡丘'},
newObj:{}
}
},
methods:{
changObj(){
// delete this.obj.name
this.$delete(this.obj,'name')
console.log(this.obj);//{}
}
}
}
</script>
<style>
</style>2. Verwenden Sie this.$set(), um die Reaktionsfähigkeit von Arrays zu implementieren
Lösen Sie das Reaktionsproblem des Datenverlusts beim Ändern von Arrays basierend auf Indizes.
Quellcode:
<template>
<div>
<div>{
{ arr }}</div>
<button @click="changArr">更改obj</button>
</div>
</template>
<script>
export default {
data(){
return{
arr:[0,1,2,3,4]
}
},
methods:{
changArr(){
this.arr[0]=5
console.log(this.arr);//[5,1,2,3,4] 数据更改了但页面没有更新
}
}
}
</script>
<style>
</style>Code nach der Transformation:
<template>
<div>
<div>{
{ arr }}</div>
<button @click="changArr">更改obj</button>
</div>
</template>
<script>
export default {
data(){
return{
arr:[0,1,2,3,4]
}
},
methods:{
changArr(){
this.$set(this.arr,'0',5)
console.log(this.arr);//[5,1,2,3,4] 数据更改页面更新
}
}
}
</script>
<style>
</style>