Eine kurze Diskussion darüber, wie man Vue-Komponenten neu rendert? 3 Möglichkeiten zum Teilen

Wie rendere ich eine Vue-Komponente erneut? Im folgenden Artikel werden verschiedene Möglichkeiten zum erneuten Rendern von Vue-Komponenten zusammengefasst und vorgestellt. Ich hoffe, dass er für alle hilfreich ist!

Vor Kurzem musste ich die aktuelle Komponente neu rendern. Dies ist ganz einfach: Benachrichtigen Sie einfach die übergeordnete Komponente, um sie erneut zu rendern.

Im Folgenden fasse ich die verschiedenen mir bekannten Möglichkeiten zum erneuten Rendern von Vue-Komponenten zusammen. [Verwandte Empfehlung: „vue.js Tutorial“]

Schlüssel ändern

Dies wird am meisten empfohlen.

Da Vue den virtuellen Dom-Algorithmus verwendet, um die Änderung von Elementen zu bestimmen, besteht der Kern der Änderung darin, festzustellen, ob sich die Schlüsselwerte der alten und neuen Elemente geändert haben. Wenn sich Ihr Schlüssel ändert, wird das Element neu gerendert. Wenn sich der Schlüssel nicht geändert hat, wird es nicht neu gerendert.

Wenn Sie also möchten, dass Ihre Komponente neu gerendert wird, fügen Sie der Komponente das Attribut key hinzu und ändern dann den Wert des Schlüssels, wenn er neu gerendert werden muss. key属性，然后在需要重新渲染的时候，改变key的值就行。

组件会重新渲染，相应的生命周期函数，计算属性，watch等都会执行。

<template>
  <div class="home">
    <el-button @click="freshKey">test</el-button>
    <aComp :key="key"></aComp>
  </div>
</template>

<script>
import aComp from &#39;@/components/aComp&#39;
export default {
  components: {
    aComp
  },
  data () {
    return {
      key: 0
    }
  },
  methods: {
    freshKey () {
      this.key++
    }
  }
}
</script>

v-if

我们用的指令中，v-if也是比较多的。

当你设置为false的时候，当前条件块里包含的元素会被销毁，如果包含的是组件，则组件对应的生命周期函数（beforeDestroy，destroyed等）会执行。

当你设置为true的时候，当前条件块里的元素会被重建，如果包含的是组件，则组件对应的生命周期函数（created，mounted等），计算属性，watch等会执行，相当于重新渲染。

vm.$forceUpdate()

这个方法用的不多，是强制更新视图。

但是vue是双向绑定的，数据变化，视图也会实时刷新，什么情况下会用到这个方法呢？

比如vue只针对数组的这些方法会刷新视图：

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

Die Komponente wird neu gerendert und die entsprechenden Lebenszyklusfunktionen, berechneten Eigenschaften, Uhren usw. werden ausgeführt.

export default {
  data () {
    return {
      arr: [1, 2, 3]
    }
  },
  methods: {
    editArr () {
      this.arr[0] = 0 // 视图不会刷新
    },
    forceUpdate () {
      this.$forceUpdate() // 调用这个方法会刷新视图
    }
  }
}

v-if

Unter den von uns verwendeten Anweisungen ist auch v-if relativ häufig.

Wenn Sie es auf false setzen, werden die im aktuellen bedingten Block enthaltenen Elemente zerstört. Wenn er eine Komponente enthält, wird die entsprechende Lebenszyklusfunktion der Komponente (beforeDestroy) ausgeführt > , destroyed usw.) werden ausgeführt.

Wenn Sie es auf true setzen, werden die Elemente im aktuellen bedingten Block neu erstellt. Wenn er eine Komponente enthält, wird die entsprechende Lebenszyklusfunktion der Komponente (erstellt) erstellt , mount usw.), berechnete Eigenschaften, Überwachung usw. werden ausgeführt, was einem erneuten Rendern entspricht. 🎜

🎜vm.$forceUpdate()🎜🎜🎜Diese Methode wird nicht oft verwendet, sie dient dazu, die Aktualisierung der Ansicht zu erzwingen. 🎜🎜Aber Vue ist bidirektional. Wenn sich die Daten ändern, wird die Ansicht in Echtzeit aktualisiert. 🎜🎜Zum Beispiel aktualisiert Vue nur die Ansicht für diese Methoden von Arrays: 🎜

• push()🎜
• pop()🎜
• shift()🎜
• unshift()🎜
• splice()🎜
• sort()🎜<li> <code>reverse()🎜🎜🎜Wenn Sie also beispielsweise einen Wert im Array neu zuweisen, aktualisiert Vue die Ansicht nicht. Anschließend können Sie mit dieser Methode die Aktualisierung der Ansicht erzwingen. 🎜rrreee🎜🎜Wenn die Vue-Instanz diese Methode ausführt, wird nur die Ansicht aktualisiert. Die der Instanz entsprechenden Lebenszyklusfunktionen, berechneten Eigenschaften, Uhren usw. werden nicht erneut ausgeführt. 🎜🎜🎜Weitere Kenntnisse zum Thema Programmierung finden Sie unter: 🎜Einführung in die Programmierung🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion darüber, wie man Vue-Komponenten neu rendert? 3 Möglichkeiten zum Teilen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!