Eine kurze Analyse von Vue.set und this.$set in Vue und ein Blick auf die Einsatzszenarien!-View.js-php.cn

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

青灯夜游

Freigeben： 2022-03-04 19:48:39

nach vorne

3028 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

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 // 不是响应性的

Nach dem Login kopieren

这时可以使用Vue.set或者this.$set

使用方法

Vue.set(target,index,newValue)

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)

Nach dem Login kopieren

// this.$set
vm.$set(vm.items, indexOfItem, newValue)

Nach dem Login kopieren

对于对象

Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。

举个栗子

var vm = new Vue({
  data:{
    a:1
  }
})

// `vm.a` 是响应式的

vm.b = 2
// `vm.b` 是非响应式的

Nach dem Login kopieren

使用方法

Vue.set(target,key,value)

Vue.set(vm.someObject, &#39;b&#39;, 2)

Nach dem Login kopieren

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

Usage

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!