So lösen Sie das Aktualisierungsproblem der teilweisen Aktualisierungskomponente der Vue3-Seite

Betrieb starten

Der Lebenszyklus von vue3 und der Lebenszyklus von vue2 sind völlig unterschiedlich

Der Unterschied zwischen vue2 und vue3

I Hier ist eine kurze Einführung in den Unterschied zwischen den beiden. 🎜🎜#

Die alte Options-API teilt verschiedene Attribute im Code auf: Daten, berechnete Attribute, Methoden usw. Die neue synthetische API ermöglicht uns eine Segmentierung nach Funktion, im Vergleich zur alten API, die Attribute zum Gruppieren verwendet, .

vue2

export default {
    props: {
        title: String,
    },
    data() {
        return {
            username: "",
            password: "",
        };
    },
    methods: {
        login() {
            //登录axios请求处理
        },
    },
    components: {
        buttonComponent: btnComponent,
    },
    computed: {
        fullName() {
            return this.firstName + " " + this.lastName;
        },
    },
};

这样代码会更加简便和整洁vue3

export default {
    props: {
        title: String,
    },
    setup() {
        const state = reactive({
            //数据
            username: "",
            password: "",
            lowerCaseUsername: computed(() => state.username.toLowerCase()), //计算属性
        });
        //方法
        const login = () => {
            //登录axios请求处理
        };
        return {
            login,
            state,
        };
    },
};

Vergleich des Hook-Funktionslebenszyklus zwischen Vue2 und Vue3

Vue2--------------vue3
beforeCreate  -> setup()
created       -> setup()
beforeMount   -> onBeforeMount
mounted       -> onMounted
beforeUpdate  -> onBeforeUpdate
updated       -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed     -> onUnmounted
activated     -> onActivated
deactivated   -> onDeactivated

setup(): Bevor mit der Erstellung der Komponente begonnen wird, wird diese vor beforeCreate ausgeführt und erstellt. Was erstellt wird, sind Daten und Methode

onBeforeMount(): die Funktion, die ausgeführt wird, bevor die Komponente auf dem Knoten gemountet wird.

onMounted(): Funktion, die ausgeführt wird, nachdem die Komponente gemountet wurde.

onBeforeUpdate(): Funktion wird ausgeführt, bevor die Komponente aktualisiert wird.

onUpdated(): Funktion wird ausgeführt, nachdem die Komponentenaktualisierung abgeschlossen ist.
onBeforeUnmount(): Funktion wird ausgeführt, bevor die Komponente ausgehängt wird.
onUnmount(): Funktion, die ausgeführt wird, nachdem die Komponente nicht gemountet wurde.
Wenn die Komponente enthalten ist, werden die folgenden zwei Hook-Funktionen hinzugefügt.
onActivated(): Die in enthaltenen Komponenten verfügen über zwei weitere Lebenszyklus-Hook-Funktionen. Wird bei Aktivierung ausgeführt.
onDeactivated(): Wenn beispielsweise von Komponente A zu Komponente B gewechselt wird, wird es ausgeführt, wenn Komponente A verschwindet.

Komm auf den Punkt und löse das heutige Problem

Code

Zuerst müssen wir app.vue

Code ändern :

<template>
  <div id="app">
    <nav-View v-show="login" />
    <router-view v-if="isRouterAlive" /> <!-- 进行v-if判断 -->
    <foot-View v-show="login" />
  </div>
</template>

<script>
import navView from "@/components/navView.vue";
import footView from "@/components/footer.vue";
import { onMounted, ref, watch ,nextTick,provide,} from "vue";//要引入方法
import { useRouter } from "vue-router";

export default {
  name: "app",
  components: {
    navView,
    footView,
  },
  created() {
    console.log("123", this.$route.path);
  },
  setup() {
    // 局部组件刷新
    const isRouterAlive = ref(true);
    const reload = () => {
      isRouterAlive.value = false;
      nextTick(() => {
        isRouterAlive.value = true;
      });
    };
    provide("reload", reload);
    return {
      isRouterAlive,
    };
  },
  watch: {
    
  },
};
</script>

<style>
* {
  margin: 0px;
}
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

Der nächste Schritt ist die Unterkomponente (Paginierungsaufruf)

Code:

<template>
  <div>
    <!-- input框输入值，点击按钮，看值会不会清空 -->
    <input type="text"> 
  </div>
  <button @click="refresh">页面刷新</button>
</template>
<script>
import { inject } from "vue";
export default{
  setup() {
    const refresh = inject("reload");
	//在方法体中的调用方法
    // refresh();
    return {
      refresh,
    };
  },
};
</script>

Das obige ist der detaillierte Inhalt vonSo lösen Sie das Aktualisierungsproblem der teilweisen Aktualisierungskomponente der Vue3-Seite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!