Vue3页面局部刷新组件的刷新问题怎么解决
时间：2023-05-17 11:12
vue3的生命周期和vue2的生命周期是完全不一样的 我这里就简单介绍一下2者的区别 Vue2与Vue3 最大的区别：Vue2使用选项类型API（Options API）对比Vue3合成型API（Composition API） 旧的选项型API在代码里分割了不同的属性: data,computed属性，methods，等等。新的合成型API能让我们用方法（function）来分割，相比于旧的API使用属性来分组， 首先我们要对app.vue进行修改 代码： 接下来就是子组件（分页的调用） 代码： 以上就是Vue3页面局部刷新组件的刷新问题怎么解决的详细内容，更多请关注Gxl网其它相关文章！开始操作
vue2和vue3的区别
这样代码会更加简便和整洁。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--------------vue3beforeCreate -> setup()created -> setup()beforeMount -> onBeforeMountmounted -> onMountedbeforeUpdate -> onBeforeUpdateupdated -> onUpdatedbeforeDestroy -> onBeforeUnmountdestroyed -> onUnmountedactivated -> onActivateddeactivated -> onDeactivated
setup() :开始创建组件之前，在beforeCreate和created之前执行。创建的是data和method
onBeforeMount() : 组件挂载到节点上之前执行的函数。
onMounted() : 组件挂载完成后执行的函数。
onBeforeUpdate(): 组件更新之前执行的函数。
onUpdated(): 组件更新完成之后执行的函数。
onBeforeUnmount(): 组件卸载之前执行的函数。
onUnmounted(): 组件卸载完成后执行的函数
若组件被包含，则多出下面两个钩子函数。
onActivated(): 被包含在中的组件，会多出两个生命周期钩子函数。被激活时执行 。
onDeactivated(): 比如从 A组件，切换到 B 组件，A 组件消失时执行。步入正题，解决今天的问题
代码
<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>
