Vue3中進行頁面區域性重新整理元件重新整理的操作方法

2022-12-21 14:00:10

前言

今天在給vue3的專案中進行資料繫結的時候，發現我刪除一條記錄頁面不會自動重新整理，還是保留原來的狀態

但是資料已經傳送給後端，後端也完成了響應的處理

這個時候我想到了區域性重新整理，我想vue3是vue2的升級版，那麼部分語法應該是支援的才對，經過嘗試不是很完美

沒有達到自己想要的情況，期間還很多報錯

開始操作

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

vue2和vue3的區別

我這裡就簡單介紹一下2者的區別

Vue2與Vue3 最大的區別：Vue2使用選項型別API（Options API）對比Vue3合成型API（Composition API）

舊的選項型API在程式碼裡分割了不同的屬性: data,computed屬性，methods，等等。新的合成型API能讓我們用方法（function）來分割，相比於舊的API使用屬性來分組，這樣程式碼會更加簡便和整潔。

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和Vue3的勾點函數生命週期對照

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

setup() :開始建立元件之前，在beforeCreate和created之前執行。建立的是data和method
onBeforeMount() : 元件掛載到節點上之前執行的函數。
onMounted() : 元件掛載完成後執行的函數。
onBeforeUpdate(): 元件更新之前執行的函數。
onUpdated(): 元件更新完成之後執行的函數。
onBeforeUnmount(): 元件解除安裝之前執行的函數。
onUnmounted(): 元件解除安裝完成後執行的函數
若元件被包含，則多出下面兩個勾點函數。
onActivated(): 被包含在中的元件，會多出兩個生命週期勾點函數。被啟用時執行。
onDeactivated(): 比如從 A元件，切換到 B 元件，A 元件消失時執行。

步入正題，解決今天的問題

我們瞭解過了二者的區別，那我們開始解決問題，百度搜素出來的解決方案大部分都是vue2的今天咱們用vue3的方法來實現區域性元件重新整理

程式碼

首先我們要對app.vue進行修改

程式碼：

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

接下來就是子元件（分頁的呼叫）