Vue3 페이지 부분 새로 고침 구성 요소의 새로 고침 문제를 해결하는 방법

작업 시작

vue3의 라이프사이클과 vue2의 라이프사이클은 완전히 다릅니다

vue2와 vue3의 차이점

여기서는 둘의 차이점을 간략하게 소개하겠습니다

Vue2와 Vue3의 가장 큰 차이점 : Vue2 옵션 API(Options API) 대 Vue3 Composition API 사용

이전 옵션 API는 코드에서 데이터, 계산된 속성, 메서드 등 다양한 속성을 분할합니다. 새로운 복합 API를 사용하면 속성을 사용하여 그룹화하는 이전 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 전에 실행되어 생성됩니다. 생성되는 것은 데이터와 메소드

onBeforeMount()입니다: 컴포넌트가 노드에 마운트되기 전에 실행되는 함수입니다.
onMounted(): 구성요소가 마운트된 후 실행되는 함수입니다.
onBeforeUpdate(): 구성 요소가 업데이트되기 전에 실행되는 함수입니다.
onUpdated(): 구성 요소 업데이트가 완료된 후 실행되는 함수입니다.
onBeforeUnmount(): 구성 요소가 마운트 해제되기 전에 실행되는 함수입니다.
onUnmounted(): 컴포넌트 언마운트 완료 후 실행되는 함수
컴포넌트가 포함된 경우 다음 두 가지 Hook 함수가 추가됩니다.
onActivated(): 포함된 구성 요소에는 두 가지 수명 주기 후크 기능이 더 있습니다. 활성화되면 실행됩니다.
onDeactivated(): 예를 들어 컴포넌트 A에서 컴포넌트 B로 전환하는 경우 컴포넌트 A가 사라질 때 실행됩니다.

본론으로 들어가 오늘의 문제를 해결해 봅시다

Code

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

다음 단계는 하위 구성 요소(페이지 매김 호출)입니다

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>

위 내용은 Vue3 페이지 부분 새로 고침 구성 요소의 새로 고침 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!