In diesem Artikel wird über Vue.set und this.$set in Vue gesprochen und die Verwendung und Verwendungsszenarien von Vue.set und this.$set vorgestellt. Ich hoffe, dass es für alle hilfreich ist!
Aufgrund von JavaScript-Einschränkungen kann Vue keine Änderungen in Arrays und Objekten in Daten erkennen und löst daher keine Ansichtsaktualisierungen aus. vuejs-Video-Tutorial
Vue kapselt diese JS-Array-Methoden, mit denen Array-Updates erkannt werden können.
Im folgenden Beispiel ist vm.items[1] = 'excess'
<body>
<div id="app">
<ul>
<li v-for="(item, index) in items">
{{ index }} : {{ item }}
</li>
</ul>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
items: ['a', 'b', 'c']
},
created() {
this.items = ['a', 'test', 'c']
}
})
</script>
</body><body>
<div id="app">
<ul>
<li v-for="(value, name) in object">
{{ name }} : {{ value }}
</li>
</ul>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
object: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
}
},
created() {
this.object = {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10',
test: 'newthing'
}
}
})
</script>
</body>vm. list[ 0]=newValuevm.list.length=newLengthvm.list[0]=newValuevm.list.length=newLength举个栗子
var vm = new Vue({
data: {
items: ['a', 'b', 'c']
}
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的这时可以使用Vue.set或者this.$set
Vue.set(target,index,newValue)
// Vue.set Vue.set(vm.items, indexOfItem, newValue)
// this.$set vm.$set(vm.items, indexOfItem, newValue)
Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。
举个栗子
var vm = new Vue({
data:{
a:1
}
})
// `vm.a` 是响应式的
vm.b = 2
// `vm.b` 是非响应式的Vue.set(target,key,value)
Vue.set(vm.someObject, 'b', 2)
Vue.set(target,index,newValue)</code ><strong><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">this.$set(this.someObject,&#39;b&#39;,2)</pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">const app = new Vue({
data: {
a: 1
}
// render: h => h(Suduko)
}).$mount(&#39;#app1&#39;)
Vue.set(app.data, &#39;b&#39;, 2)</pre><div class="contentsignin">Nach dem Login kopieren</div></div><h3 data-id="heading-12"></strong>Für Objekte</p><p><img src="https://img.php.cn/upload/image/851/547/687/164638308062437Eine kurze Analyse von Vue.set und this.$set in Vue und ein Blick auf die Einsatzszenarien!" title="164638308062437Eine kurze Analyse von Vue.set und this.$set in Vue und ein Blick auf die Einsatzszenarien!" alt="Eine kurze Analyse von Vue.set und this.$set in Vue und ein Blick auf die Einsatzszenarien!"/>Vue kann das Hinzufügen oder Entfernen von Eigenschaften nicht erkennen. Da Vue beim Initialisieren der Instanz eine Getter/Setter-Konvertierung für die Eigenschaft durchführt, muss die Eigenschaft im Datenobjekt vorhanden sein, damit Vue sie in reaktiv umwandeln kann. </p><p>Zum Beispiel<strong><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">var vm=new Vue({
el:&#39;#test&#39;,
data:{
//data中已经存在info根属性
info:{
name:&#39;小明&#39;;
}
}
});
//给info添加一个性别属性
Vue.set(vm.info,&#39;sex&#39;,&#39;男&#39;);</pre><div class="contentsignin">Nach dem Login kopieren</div></div><h4 data-id="heading-13">So verwenden Sie<h2 data-id="heading-15">
<strong><code>Vue.set(target,key,value)rrreeerrreee
Achtung
Vue erlaubt kein dynamisches Hinzufügen von Stammebeneresponsiven Eigenschaftenrrreee
🎜🎜🎜Sie können nur die Methode Vue.set(object, propertyName, value) verwenden, um responsive Eigenschaften zu 🎜verschachtelten Objekten🎜🎜rrreee🎜🎜4 hinzuzufügen . Nutzungsszenarien 🎜🎜🎜Wenn wir das Array oder Objekt in Daten ändern, reagieren einige Vorgänge nicht auf Datenaktualisierungen, sodass keine Ansichtsaktualisierungen ausgelöst werden. Zu diesem Zeitpunkt müssen Sie Vue.set() für reaktionsfähige Datenaktualisierungen verwenden. 🎜🎜 (Lernvideo-Sharing: 🎜vuejs-Tutorial🎜, 🎜Web-Frontend🎜)🎜Das obige ist der detaillierte Inhalt vonEine kurze Analyse von Vue.set und this.$set in Vue und ein Blick auf die Einsatzszenarien!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Die übergeordnete Vue-Komponente ruft die Methode der untergeordneten Komponente auf
vue v-wenn
Der Unterschied zwischen vue2.0 und 3.0
So übergeben Sie einen Wert an die Vue-Komponente
Der Unterschied zwischen vue3.0 und 2.0
Vue allgemeine Anweisungen
Was sind die am häufigsten verwendeten Anweisungen in Vue?
Der Unterschied zwischen mpvue und vue
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
