Home > Article > Web Front-end > How to solve the refresh problem of Vue3 page partial refresh component
The life cycle of vue3 and the life cycle of vue2 are completely different
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
.
export default { props: { title: String, }, data() { return { username: "", password: "", }; }, methods: { login() { //登录axios请求处理 }, }, components: { buttonComponent: btnComponent, }, computed: { fullName() { return this.firstName + " " + this.lastName; }, }, };
export default { props: { title: String, }, setup() { const state = reactive({ //数据 username: "", password: "", lowerCaseUsername: computed(() => state.username.toLowerCase()), //计算属性 }); //方法 const login = () => { //登录axios请求处理 }; return { login, state, }; }, };
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.
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!