How to solve the refresh problem of Vue3 page partial refresh component

Start the operation

The life cycle of vue3 and the life cycle of vue2 are completely different

The difference between vue2 and vue3

I will briefly introduce the two here. The difference

The biggest difference between Vue2 and Vue3: Vue2 uses options API (Options API) compared to Vue3 composition API (Composition API)

Old options API Different attributes are separated in the code: data, computed attributes, methods, etc. The new synthetic API allows us to use methods (functions) to separate. Compared with the old API that uses attributes to group, this way the code will be simpler and cleaner.

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,
        };
    },
};

Hook function life cycle comparison between Vue2 and Vue3

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

setup(): Before starting to create a component, beforeCreate and Executed before created. What is created is data and method
onBeforeMount(): the function executed before the component is mounted on the node.
onMounted(): Function executed after the component is mounted.
onBeforeUpdate(): Function executed before the component is updated.
onUpdated(): Function executed after component update is completed.
onBeforeUnmount(): Function executed before the component is unmounted.
onUnmounted(): Function executed after component unmounting is completed
If the component is included, the following two hook functions will be added.
onActivated(): The component included will have two more life cycle hook functions. Executed when activated.
onDeactivated(): For example, when switching from component A to component B, it will be executed when component A disappears.

Get to the point and solve today’s problem

Code

First we need to modify 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>

The next step is the subcomponent (pagination call)

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>

The above is the detailed content of How to solve the refresh problem of Vue3 page partial refresh component. For more information, please follow other related articles on the PHP Chinese website!