Bagaimana untuk menyelesaikan masalah muat semula komponen muat semula separa halaman Vue3

Mulakan operasi

Kitaran hayat vue3 dan kitaran hayat vue2 adalah berbeza sama sekali

Perbezaan antara vue2 dan vue3

Saya akan memperkenalkan kedua-duanya secara ringkas di sini. Perbezaannya

Perbezaan terbesar antara Vue2 dan Vue3: Vue2 menggunakan API pilihan (API Pilihan) berbanding API komposisi Vue3 (API Komposisi)

API pilihan lama Atribut yang berbeza dipisahkan dalam kod: data, atribut yang dikira, kaedah, dsb. API sintetik baharu membolehkan kami membahagikan mengikut fungsi, berbanding API lama yang menggunakan atribut kepada kumpulan, 这样代码会更加简便和整洁.

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

Vue2 dan Vue3 perbandingan kitaran hayat fungsi cangkuk

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

setup(): Sebelum mula mencipta komponen, sebelumCreate dan Dilaksanakan sebelum dibuat. Apa yang dicipta ialah data dan kaedah
onBeforeMount(): fungsi yang dilaksanakan sebelum komponen dipasang pada nod.
onMounted(): Fungsi dilaksanakan selepas komponen dipasang.
onBeforeUpdate(): Fungsi dilaksanakan sebelum komponen dikemas kini.
onUpdated(): Fungsi dilaksanakan selepas kemas kini komponen selesai.
onBeforeUnmount(): Fungsi dilaksanakan sebelum komponen dinyahlekapkan.
onUnmounted(): Fungsi dilaksanakan selepas penyahlekapan komponen selesai
Jika komponen disertakan, dua fungsi cangkuk berikut akan ditambah.
onActivated(): Komponen yang disertakan akan mempunyai dua lagi fungsi cangkuk kitaran hayat. Dilaksanakan apabila diaktifkan.
onDeactivated(): Contohnya, apabila bertukar daripada komponen A ke komponen B, ia akan dilaksanakan apabila komponen A hilang.

Sampaikan kepada intinya dan selesaikan masalah hari ini

Kod

Mula-mula kita perlu mengubah suai app.vue

Kod:

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

Langkah seterusnya ialah subkomponen (panggilan penomboran)

Kod:

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

Atas ialah kandungan terperinci Bagaimana untuk menyelesaikan masalah muat semula komponen muat semula separa halaman Vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!