Vue3中进行页面局部刷新组件刷新的操作方法

目录
  • 前言
  • 开始操作
    • vue2和vue3的区别
    • vue2
    • vue3
    • Vue2和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页面局部刷新内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue打开子组件弹窗都刷新功能的实现

    vue如何一打开子组件弹窗都刷新? 在父页面中给子组件同时绑定:visible.sync和v-if :visible.sync="paramAddDialog" v-if="paramAddDialog" 整体代码: <el-dialog title="绑定其他更多的账户" width="1200px" align="center" :visible.sync="paramAddDialog

  • vue关于this.$refs.tabs.refreshs()刷新组件方式

    目录 this.$refs.tabs.refreshs()刷新组件 第一种:当前组件刷新 第二种:刷新父组件时 第三种:非关系组件 vue组件重新加载(刷新) 如何刷新当前组件 this.$refs.tabs.refreshs()刷新组件 当更改了用户信息后,需要刷新页面或者组件. 第一种:当前组件刷新 定义一个请求用户信息的方法,在需要时调用: sessionStorage.setItem('userInfo',JSON.stringify(this.userInfo)); //从sessio

  • Vue3实现刷新页面局部内容的示例代码

    目录 第一步:定义状态标识 第二步.借用v-if 指令让dom节点重新渲染 第三步.修改isRouterAlive 值,实现dom的重新渲染 想要实现页面的局部刷新,我们只需要实现局部组件(dom)的重新渲染.在Vue中,想要实现这一效果最简便的方式方法就是使用v-if 指令. 在Vue2中我们除了使用v-if 指令让局部dom的重新渲染,也可以新建一个空白组件,需要刷新局部页面时跳转至这个空白组件页面,然后在空白组件内的beforeRouteEnter 守卫中又跳转回原来的页面. 如下图所示,

  • vue组件值变化但不刷新强制组件刷新的问题

    目录 组件值变化但不刷新强制组件刷新 bug复现 解决 强制刷新vue组件 问题 解决 – 强制刷新组件 组件值变化但不刷新强制组件刷新 在调用组件的时候,如果数据中只是某个属性变化(比如id)变化,在vue开发工具中看到变量值变化,但是组件上的数据就是不刷新 bug复现 引用组件 <bulletMenuVue v-else-if="sNode.type == 'cBomb'" :data="sNode" /> sNode数据结构 {     "

  • vue强制刷新组件的方法示例

    前言: 在开发过程中,有时候会遇到这么一种情况,通过动态的赋值,但是dom没有及时更新,能够获取到动态赋的值,但是无法获取到双向绑定的dom节点,这就需要我们手动进行强制刷新组件. 官网是这样说的: 可能你还不大理解,请继续往下看,下面是我的一个例子,来详细解说了这个方法的使用, 第一个打印结果 第二个打印结果 一.问题描述:父组件通过v-for渲染子组件,删除子组件数据出现异常. <code class="language-plain"><section v-if=

  • Vue实现父子组件页面刷新的几种常用方法

    目录 1.原地页面重新加载(不推荐) 2.空白页面作为过渡 3.使用Provide / Inject组合控制显示 4.v-on:param父组件监听子组件事件 参考文档: 很多时候我们在操作过页面时候,特别是增删改操作之后,数据会有所改变,这个时候我们希望返回的界面中的数据要和数据库中的数据进行同步,就需要刷新当前页面,如果是使用ajax可以使用异步请求实现页面的局部刷新,Vue常用的几种刷新页面方法如下: 1.原地页面重新加载(不推荐) this.$router.go(0) //根据路由重新定

  • Vue3中进行页面局部刷新组件刷新的操作方法

    目录 前言 开始操作 vue2和vue3的区别 vue2 vue3 Vue2和Vue3的钩子函数生命周期对照 步入正题,解决今天的问题 代码 前言 今天在给vue3的项目中进行数据绑定的时候,发现我删除一条记录页面不会自动刷新,还是保留原来的状态 但是数据已经传送给后端,后端也完成了响应的处理 这个时候我想到了局部刷新,我想vue3是vue2的升级版,那么部分语法应该是支持的才对,经过尝试不是很完美 没有达到自己想要的情况,期间还很多报错 开始操作 vue3的生命周期和vue2的生命周期是完全不

  • vue3中使用ant-design-vue的layout组件实现动态导航栏和面包屑功能

    目录 0 前言 1 准备工作 1.1 安装ant-design-vue 1.2 安装图标组件包 2 选择组件 3 路由文件 4 Vue导航页面 5 最终效果 0 前言 最近在自己搞一个前后端小项目,前端想使用ant-design-vue的layout组件实现动态导航栏和面包屑,但是网上的资料较少,所以我就自己整合实现了一下,在此记录分享. 1 准备工作 基于一个新建的Vue3项目上实现. 1.1 安装ant-design-vue 官方文档:Components Overview - Ant De

  • vue3中轻松实现switch功能组件的全过程

    what 编程语言里面,除了使用 if 语句来做条件判断,还有另外一个常用的就是 switch 了. 而在 vue 中,官方已经帮助我们实现了 v-if 这个指令,但是还没有 switch ,那我们能不能自己实现一个呢? 这篇文章就是来探索这个问题,并且最终实现一个 Switch 组件 以终为始 先来看看我们希望用户是如何使用 Switch 的 用 js 的方式来对比一下: 用户可以通过一个 VSwitch 组件来应用 switch 功能 通过 case 来确定匹配的条件 然后每一个 case

  • vue3中ref绑定dom或者组件失败的原因及分析

    目录 vue3 ref绑定dom或者组件失败原因分析 场景描述 ref绑定失败情况举例 解决方案 vue3组合式API的v-for及ref绑定DOM 总结 vue3 ref绑定dom或者组件失败原因分析 场景描述 在vue3中经常用到使用ref绑定组件或者dom元素的情况,很多时候,明明使用ref绑定了相关组件,但是经常ref绑定失败的情况. ref绑定失败情况举例 ref绑定失败的绝大多数情况是,在ref和组件绑定的时候,该组件还未渲染,所以绑定失败. 或者组件刚开始未渲染,ref未绑定,当组

  • vue2 vue3中使用Echarts详细

    目录 1.安装 2.vue2中使用Echarts 在main.js文件中 给定一个容器 3.vue3中使用Echarts 在根组件里引入echart,一般是App.vue 在需要使用的页面,定义div 然后在需要使用到Echarts的页面inject 1.安装 npm install echarts --save 2.vue2中使用Echarts 在main.js文件中 // 引入echarts import echarts from 'echarts' Vue.prototype.$echar

  • vue中实现页面刷新以及局部刷新的方法

    目录 一.全页面刷新 二.局部刷新 三.应用场景 总结 一.全页面刷新 1.修改 App.vue,代码如下: <template> <div id="app"> <router-view v-if="isRouterAlive" /> </div> </template> <script> export default { name: 'App', provide() { // 父组件中返回要传

  • 浅析PHP页面局部刷新功能的实现小结

    方法其实挺多的.以前比较常用的是iframe这样来做.现在多了个ajax,所以一般情况下都是用的ajax.第一种方法,ajax实现:当然,ajax使用起来确实很简单就可以实现,但是里面的很多知识还是比较有点深的.我之前做页面时间自动刷新的功能就是用的ajax.完整代码是:1.getTime.php: 复制代码 代码如下: <?phpheader("cache-control:no-cache,must-revalidate");  header("Content-Typ

  • JavaScript中iframe实现局部刷新的几种方法汇总

    Iframe是一种嵌入网页的框架形式,Web页面可以通过更改嵌入的部分,达到部分内容刷新. Iframe的用法与普通的标签元素DIV类似,可以指定在页面中嵌入的位置.颜色.界面布局等 一.iframe实现局部刷新方法一 <script type="text/javascript"> $(function(){ $("#a1").click(function(){ var name= $(this).attr("name"); $(&q

  • JS中利用localStorage防止页面动态添加数据刷新后数据丢失

    非常不多说了,直接给大家贴代码了,具体代码如下所示: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,use

随机推荐