Wie implementiert Vue eine teilweise Aktualisierung? (Codebeispiel)

Wir alle wissen, dass die Komponentisierung der leistungsstärkste Kern von Vue ist und dass das Routing auch für einige große Komponenten geeignet ist. Beim Betrachten des URL-Pfads wird es jedoch Änderungen geben, aber manchmal möchten wir Für einige kleine lokale Aktualisierungen müssen Sie zu diesem Zeitpunkt die dynamischen Komponenten verwenden.

Das von Vue selbst beibehaltene -Element kann die Komponente dynamisch an das is-Attribut binden, wodurch die dynamische Komponentenumschaltung einfach implementiert werden kann

Der Code lautet wie folgt: slotsDome.vue:

<template>
  <div>
    <slot></slot>
    <slot name="wise"></slot>
 
    <el-radio-group v-modal="tabView">
      <el-radio-button label="simple1" @click="toSim(1)">
        <button>页面一</button></el-radio-button>
      <el-radio-button label="simple2" @click="toSim(2)"><button>页面二</button>
      </el-radio-button>
    </el-radio-group>
    <keep-alive>
      <component :is="tabView"></component>
    </keep-alive>
  </div>
</template>
<style rel="stylesheet/stylus">
  el-radio-button
    &:hover
      cursor pointer
</style>
<script>
  import simple1 from "./simple/simple1.vue";
  import simple2 from "./simple/simple2.vue";
  export default{
    data(){
      return {
        tabView: "simple1"
      }
    },
    methods: {
      toSim(index){
        this.tabView = `simple${index}`;
      }
    },
    components: {
      simple1,
      simple2
    }
  }
</script>

simple1.vue:

<template>
  <div>
    这是页面一
    <input type="text">
  </div>
</template>

simple2.vue:

<template>
  <div>
    这是页面二
    <input type="text">
  </div>
</template>

Wenn sich im obigen Beispiel der Wert von tabView ändert, rendert die entsprechende Komponente, was dem Effekt des Routings sehr ähnlich ist, aber die Adressleiste hat sich nicht geändert

Auf diese Weise wird jedoch jede Komponente jedes Mal neu gerendert, wenn die Komponente gewechselt wird, und die Daten auf der Komponente können nicht beibehalten werden. Zu diesem Zeitpunkt können Sie Keep-Alive verwenden, um die Komponente im Speicher zu belassen und ein erneutes Rendern zu vermeiden Zusammenfassung (mit Antworten)

vue-Tutorial-Empfehlung: Die neuesten 5 vue.js-Video-Tutorial-Auswahlen im Jahr 2020

Weitere Programmierkenntnisse finden Sie unter:
Einführung in die Programmierung

! !

Das obige ist der detaillierte Inhalt vonWie implementiert Vue eine teilweise Aktualisierung? (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!