Vue3局部刷新组件方法：解决数据更新后页面不自动刷新的问题

前言

今日在Vue3项目中处理数据绑定时，遇到删除记录后页面未自动刷新的情况，界面仍保持原有状态。

尽管数据已成功发送至后端，且后端完成了相应的处理响应。

此时考虑采用局部刷新方案，鉴于Vue3是Vue2的升级版本，推测部分语法应当兼容，但实际尝试结果并不完美。

最终效果未达预期，期间还出现了多处报错。

开始操作

Vue3的生命周期机制与Vue2存在显著差异。

Vue2和Vue3的区别

此处简要介绍两者的主要区别。

Vue2与Vue3最核心的区别在于：Vue2采用选项类型API（Options API），而Vue3采用合成型API（Composition API）。

旧的选项型API在代码中按属性分组，如data、computed、methods等；新的合成型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 组件消失时执行。

步入正题，解决今天的问题

了解二者区别后，开始解决问题。百度搜索结果多针对Vue2，本文将展示如何在Vue3中实现局部组件刷新。

代码

首先需要对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中进行页面局部刷新组件刷新的操作方法的文章就介绍到这了,更多相关Vue3页面局部刷新内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

Vue3实现页面局部刷新组件刷新的操作方法

前言