Vue3中進(jìn)行頁(yè)面局部刷新組件刷新的操作方法

更新時(shí)間：2022年12月20日 16:11:41 作者：執(zhí)著1111

這篇文章主要介紹了Vue3中進(jìn)行頁(yè)面局部刷新組件刷新的操作方法,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

前言

今天在給vue3的項(xiàng)目中進(jìn)行數(shù)據(jù)綁定的時(shí)候，發(fā)現(xiàn)我刪除一條記錄頁(yè)面不會(huì)自動(dòng)刷新，還是保留原來(lái)的狀態(tài)

但是數(shù)據(jù)已經(jīng)傳送給后端，后端也完成了響應(yīng)的處理

這個(gè)時(shí)候我想到了局部刷新，我想vue3是vue2的升級(jí)版，那么部分語(yǔ)法應(yīng)該是支持的才對(duì)，經(jīng)過(guò)嘗試不是很完美

沒(méi)有達(dá)到自己想要的情況，期間還很多報(bào)錯(cuò)

開(kāi)始操作

vue3的生命周期和vue2的生命周期是完全不一樣的

vue2和vue3的區(qū)別

我這里就簡(jiǎn)單介紹一下2者的區(qū)別

Vue2與Vue3 最大的區(qū)別：Vue2使用選項(xiàng)類(lèi)型API（Options API）對(duì)比Vue3合成型API（Composition API）

舊的選項(xiàng)型API在代碼里分割了不同的屬性: data,computed屬性，methods，等等。新的合成型API能讓我們用方法（function）來(lái)分割，相比于舊的API使用屬性來(lái)分組，這樣代碼會(huì)更加簡(jiǎn)便和整潔。

vue2

export default {
    props: {
        title: String,
    },
    data() {
        return {
            username: "",
            password: "",
        };
    },
    methods: {
        login() {
            //登錄axios請(qǐng)求處理
        },
    },
    components: {
        buttonComponent: btnComponent,
    },
    computed: {
        fullName() {
            return this.firstName + " " + this.lastName;
        },
    },
};

vue3

export default {
    props: {
        title: String,
    },
    setup() {
        const state = reactive({
            //數(shù)據(jù)
            username: "",
            password: "",
            lowerCaseUsername: computed(() => state.username.toLowerCase()), //計(jì)算屬性
        });
        //方法
        const login = () => {
            //登錄axios請(qǐng)求處理
        };
        return {
            login,
            state,
        };
    },
};

Vue2和Vue3的鉤子函數(shù)生命周期對(duì)照

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

setup() :開(kāi)始創(chuàng)建組件之前，在beforeCreate和created之前執(zhí)行。創(chuàng)建的是data和method
onBeforeMount() : 組件掛載到節(jié)點(diǎn)上之前執(zhí)行的函數(shù)。
onMounted() : 組件掛載完成后執(zhí)行的函數(shù)。
onBeforeUpdate(): 組件更新之前執(zhí)行的函數(shù)。
onUpdated(): 組件更新完成之后執(zhí)行的函數(shù)。
onBeforeUnmount(): 組件卸載之前執(zhí)行的函數(shù)。
onUnmounted(): 組件卸載完成后執(zhí)行的函數(shù)
若組件被包含，則多出下面兩個(gè)鉤子函數(shù)。
onActivated(): 被包含在中的組件，會(huì)多出兩個(gè)生命周期鉤子函數(shù)。被激活時(shí)執(zhí)行。
onDeactivated(): 比如從 A組件，切換到 B 組件，A 組件消失時(shí)執(zhí)行。

步入正題，解決今天的問(wèn)題

我們了解過(guò)了二者的區(qū)別，那我們開(kāi)始解決問(wèn)題，百度搜素出來(lái)的解決方案大部分都是vue2的今天咱們用vue3的方法來(lái)實(shí)現(xiàn)局部組件刷新

代碼

首先我們要對(duì)app.vue進(jìn)行修改

代碼：

<template>
  <div id="app">
    <nav-View v-show="login" />
    <router-view v-if="isRouterAlive" /> <!-- 進(jìn)行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>

接下來(lái)就是子組件（分頁(yè)的調(diào)用）

代碼：

<template>
  <div>
    <!-- input框輸入值，點(diǎn)擊按鈕，看值會(huì)不會(huì)清空 -->
    <input type="text"> 
  </div>
  <button @click="refresh">頁(yè)面刷新</button>
</template>
<script>
import { inject } from "vue";
export default{
  setup() {
    const refresh = inject("reload");
	//在方法體中的調(diào)用方法
    // refresh();
    return {
      refresh,
    };
  },
};
</script>

完成了我們想要的頁(yè)面局部刷新，到此問(wèn)題解決

到此這篇關(guān)于Vue3中進(jìn)行頁(yè)面局部刷新組件刷新的操作方法的文章就介紹到這了,更多相關(guān)Vue3頁(yè)面局部刷新內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: