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

PHPz
풀어 주다: 2023-05-16 22:37:19
앞으로
2410명이 탐색했습니다.

작업 시작

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:yisu.com
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿