网站导航
> 文档中心 > Vue3中如何进行页面局部刷新，组件刷新

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

网友: 文档中心 2022-03-23 09:40:26

前言

今天在给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,    };  },};

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

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

网络标签：

相关问题