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进行修改
代码:
<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中的父子.子父组件通信方式总结 李俊才的CSDN博客 CSDN用户名:jcLee95 邮箱:291148484@163.com 1. 父组件 => 子组件 | 使用props 父组件(分 ...
- vue 公用页面引用_vue中实现部分页面引入公共组件
前言 我们可以把公共组件放到App.vue中,但是有时候我们希望某个页面不需要这写公共部分,那么需要怎么设置呢? 本文为大家介绍三种部分页面引入公共组件的方法. 方法一:利用子路由 创建一个layou ...
- vue项目中,设置页面局部loading加载效果(element)
直接引用element的loading,默认的是全屏loading,实际中有很多地方不需要全屏loading,只需要某部分loading,如上图 话不多说,直接上代码 封装好的loading.js i ...
- Vue3中 内置组件 Teleport 详解
1. 基本概念 1.1 简单理解 不管是 Vue2 还是 Vue3 中都有内置组件的存在,如 component 内置组件.transition 内置组件等等.内置组件就是官方给我们封装的全局组件,我 ...
- ArcGIS engine中Display类库 (局部刷新)
转自原文 ArcGIS engine中Display类库 (局部刷新) Display类库包括了用于显示GIS数据的对象.除了负责实际输出图像的主要显示对象(display object)外,这个类库 ...
- Vue | 实现页面跳转刷新,在Vue页面中调用其他页面的方法
最近有一个登录界面的需求,感觉很简单,尝试各种方法每次都感觉快要成功了,但还是没能解决问题,果然没有系统学习就是很难立刻找到突破点,难以一语中的,好在历经千帆,在页面调用中就解决了这个问题. 需求描述 ...
- vue使用provide / inject 组合刷新页面+单独组件刷新
原文链接:https://www.cnblogs.com/leng12/p/xiaoleng.html 一.this.$router.go(0) 相当于F5刷新,这种方法虽然代码很少,只有一行,但是体 ...
- 实际记录vue3中使用rrweb以及rrweb-player组件实现网页录屏和回放功能,还有遇到的问题和解决思考
文章目录 前言 一.rrweb与rrweb-player引入项目中 二.使用步骤 1.引入代码 2.html部分代码 3.script部分代码 三. 遇到的3个问题总结,全部都是找了很久解决办法没找到 ...
- Vue3中的setup前加上async后页面不显示
问题: Vue3项目中,在setup函数前加上了async,使其变成异步函数,导致页面空白不显示? 描述: 最近在学习Vue3项目,使用了CompositionAPI的书写方式,其中有一个setup函 ...
最新文章
- dede扩展数据类型_数据类型,扩展
- 数据中心主机房的加湿量和除湿量如何计算
- html5跨域通讯之postMessage的用法
- 如何在Linux上运行Windows软件?
- Ehcache学习总结(3)--Ehcache 整合Spring 使用页面、对象缓存
- 用了10年海尔家电,青岛一音乐老师为海尔写了1首歌
- 时序分析基本概念介绍<系统接口sdc>
- 从键盘输入3个整数,输出其中最大数
- 算法笔记_138:稳定婚姻问题(Java)
- 孙鑫VC学习笔记:第十三讲 (六) 关于释放内存
- 数据中心运维管理方案
- 原子互换:一统公链江湖的神来之笔
- 使用NetBeans进行J2ME开发(五):揭开游戏开发的神秘面纱
- idw matlab 程序_idw插值算法的C#和Matlab简单实现
- 腾讯云直播是什么?操作文档
- 江苏省计算机C语言考试记录
- EasyExcel报错com.alibaba.excel.exception.ExcelGenerateException: java.lang.ExceptionInInitializerError
- 毕业设计-基于机器学习的图片处理图片倾斜校正
- 小米8刷安卓10魔趣Rom
- 从零开始做3D地图编辑器 基于QT与OGRE