suchen

Heim >Web-Frontend >View.js >Eine kurze Analyse von Vue.set und this.$set in Vue und ein Blick auf die Einsatzszenarien!

Eine kurze Analyse von Vue.set und this.$set in Vue und ein Blick auf die Einsatzszenarien!

青灯夜游
青灯夜游nach vorne
2022-03-04 16:41:123054Durchsuche

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!

Eine kurze Analyse von Vue.set und this.$set in Vue und ein Blick auf die Einsatzszenarien!

1. Warum ist Vue.set

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

2. Lösung

array

1. Verwenden Sie die von Vue bereitgestellte Mutationsmethode

Eine kurze Analyse von Vue.set und this.$set in Vue und ein Blick auf die Einsatzszenarien!

Vue kapselt diese JS-Array-Methoden, mit denen Array-Updates erkannt werden können.

2. Ersetzen Sie das gesamte ursprüngliche Array

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: &#39;#app&#39;,
    data: {
        items: [&#39;a&#39;, &#39;b&#39;, &#39;c&#39;]
    },
    created() {
        this.items = [&#39;a&#39;, &#39;test&#39;, &#39;c&#39;]
    }
})
</script>
</body>

3. Verwenden Sie Vue.set (siehe unten)

1. Ersetzen Sie das gesamte Originalobjekt

Im folgenden Beispiel soll ein Schlüssel-Wert-Paar {test: 'newthing'} zum Objekt hinzugefügt werden

<body>
<div id="app">
    <ul>
        <li v-for="(value, name) in object">
            {{ name }} : {{ value }}
        </li>
    </ul>
</div>

<script>
let vm = new Vue({
    el: &#39;#app&#39;,
    data: {
        object: {
            title: &#39;How to do lists in Vue&#39;,
            author: &#39;Jane Doe&#39;,
            publishedAt: &#39;2016-04-10&#39;
        }
    },
    created() {
        this.object = {
            title: &#39;How to do lists in Vue&#39;,
            author: &#39;Jane Doe&#39;,
            publishedAt: &#39;2016-04-10&#39;,
            test: &#39;newthing&#39;
        }
    }
})
</script>
</body>

2. Verwenden Sie Vue.set (siehe unten). )

3. Vue.set

Für Arrays

Vue kann die folgenden Array-Änderungen nicht erkennen:

Bei Verwendung des Indexwerts zum direkten Festlegen eines Array-Elements, z. B. vm. list[ 0]=newValue
    Beim Ändern der Länge des Arrays, zum Beispiel vm.list.length=newLength
  • Zum Beispiel vm.list[0]=newValue
  • 修改数组长度时，例如vm.list.length=newLength

    • 举个栗子

    var vm = new Vue({
  data: {
    items: [&#39;a&#39;, &#39;b&#39;, &#39;c&#39;]
  }
})
vm.items[1] = &#39;x&#39; // 不是响应性的
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, &#39;b&#39;, 2)

    Dieses Mal können Sie Vue.set oder this.$set verwenden

    Usage

    Vue.set(target,index,newValue)

    this.$set(this.someObject,&#39;b&#39;,2)
    const app = new Vue({
  data: {
    a: 1
  }
  // render: h => h(Suduko)
}).$mount(&#39;#app1&#39;)

Vue.set(app.data, &#39;b&#39;, 2)

    Für Objekte

    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.

    Zum Beispiel

    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;);

    So verwenden Sie

    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!

    JavaScript Object 封装 Length Property JS 对象 this
    Stellungnahme：
    Dieser Artikel ist reproduziert unter:juejin.cn. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
    Vorheriger Artikel：Bringen Sie Ihnen Schritt für Schritt bei, wie Sie eine Vue-Zwei-Wege-Bindung implementierenNächster Artikel：Bringen Sie Ihnen Schritt für Schritt bei, wie Sie eine Vue-Zwei-Wege-Bindung implementieren

    In Verbindung stehende Artikel

    Mehr sehen