Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk menyelesaikan masalah muat semula komponen muat semula separa halaman Vue3

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

PHPz
PHPzke hadapan
2023-05-16 22:37:192403semak imbas

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!

Kenyataan:
Artikel ini dikembalikan pada:yisu.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam