开始操作
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 组件消失时执行。
步入正题，解决今天的问题
代码
首先我们要对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>登录后复制
接下来就是子组件（分页的调用）
代码：
<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中文网
发表评论 取消回复