Vue3中如何进行页面局部刷新,组件刷新

前言

今天在给vue3的项目中进行数据绑定的时候,发现我删除一条记录页面不会自动刷新,还是保留原来的状态

但是数据已经传送给后端,后端也完成了响应的处理

这个时候我想到了局部刷新,我想vue3是vue2的升级版,那么部分语法应该是支持的才对,经过尝试不是很完美

没有达到自己想要的情况,期间还很多报错

开始操作

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 组件消失时执行。

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

我们了解过了二者的区别,那我们开始解决问题,百度搜素出来的解决方案大部分都是vue2的今天咱们用vue3的方法来实现局部组件刷新

代码

首先我们要对app.vue进行修改

代码:







接下来就是子组件(分页的调用)

代码:



完成了我们想要的页面局部刷新,到此问题解决

如果本篇文章对你有帮助请点个赞和关注

你可能感兴趣的:(vue3,javascript,前端,vue.js)