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--------------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 组件消失时执行。
步入正题,解决今天的问题
我们了解过了二者的区别,那我们开始解决问题,百度搜素出来的解决方案大部分都是vue2的今天咱们用vue3的方法来实现局部组件刷新
代码
首先我们要对app.vue进行修改
代码:
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: { },};* { margin: 0px;}#app { font-family: "Avenir", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50;}
接下来就是子组件(分页的调用)
代码:
import { inject } from "vue";export default{ setup() { const refresh = inject("reload");//在方法体中的调用方法 // refresh(); return { refresh, }; },};
完成了我们想要的页面局部刷新,到此问题解决
如果本篇文章对你有帮助请点个赞和关注