Comment résoudre le problème d'actualisation du composant d'actualisation partielle de la page Vue3

Démarrer l'opération

Le cycle de vie de vue3 et le cycle de vie de vue2 sont complètement différents

La différence entre vue2 et vue3

Je vais brièvement présenter la différence entre les deux ici

La plus grande différence entre Vue2 et Vue3 : l'utilisation de l'API d'options Vue2 (API d'options) par rapport à l'API de composition Vue3

L'ancienne API d'options divisait différents attributs dans le code : données, attributs calculés, méthodes, etc. La nouvelle API composite nous permet de segmenter par fonction, par rapport à l'ancienne API qui utilise des attributs pour regrouper, 这样代码会更加简便和整洁.

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,
        };
    },
};

Comparaison du cycle de vie des fonctions de hook Vue2 et Vue3

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

setup() : avant de commencer à créer des composants, exécutés avant beforeCreate et créés. Ce qui est créé, ce sont des données et une méthode
onBeforeMount() : une fonction exécutée avant que le composant ne soit monté sur le nœud.
onMounted() : Fonction exécutée après le montage du composant.
onBeforeUpdate() : Fonction exécutée avant la mise à jour du composant.
onUpdated() : fonction exécutée une fois la mise à jour du composant terminée.
onBeforeUnmount() : fonction exécutée avant le démontage du composant.
onUnmount() : fonction exécutée une fois le démontage du composant terminé.
Si le composant est inclus, les deux fonctions hook suivantes seront ajoutées.
onActivated() : le composant inclus dans aura deux autres fonctions de hook de cycle de vie. Exécuté une fois activé.
onDeactivated() : Par exemple, lors du passage du composant A au composant B, il sera exécuté lorsque le composant A disparaît.

Passons aux choses sérieuses et résolvons le problème d'aujourd'hui

Code

Nous devons d'abord modifier app.vue

Code :

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

La prochaine étape est le sous-composant (appel de pagination)

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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!