vue中---setTimeout的使用 (插入或者更新之后再查询)

最新推荐文章于 2022-09-24 19:17:45 发布
最新推荐文章于 2022-09-24 19:17:45 发布
阅读量321 收藏
点赞数
分类专栏： Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hhtSeeTheWorld/article/details/115749080
版权

在写前端时,添加一条数据之后,一般都要执行刷新页面的操作!
就是先add 在select !
但有时我们添加之后,再查询,得到的结果却是没添加之前的数据,如果我们点击浏览器的刷新按钮,刚才添加的数据又会显示出来!
原因可能是我们的操作 反映到数据库时, 添加 和 查询 间隔时间太短了,导致数据还没添加完,就已经查询完毕,所以我们查询的结果 不包含我们正在添加的数据!
这时就需要使用

setTimeout

方法了 !
在这里插入图片描述

hhtSeeTheWorld
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue从后台获取新数据后刷新_vue项目中实现定时刷新页面（重新渲染数据实时更新）...
weixin_39873191的博客
12-19 3210
需求: 每隔一分钟自动刷新一下当前页面，同时发送请求，重新渲染数据，以到达实时更新。开始：js有两种定时器setInterval(function(){}, milliseconds)——会不停的调用函数setTimeout(function(){}, milliseconds)——只执行函数一次乍看之下，setInterval会符合我们的业务需求，然而也需要注意一些坑，单纯的使用setInter...
浅谈vue 锚点指令v-anchor的使用
10-16
此外，为了达到平滑滚动的效果，代码中使用了`setTimeout`函数来控制滚动的速度，使得滚动动作每隔固定时间发生一次，而不是一次性到位，从而创造出平滑过渡的用户体验。在现代浏览器中，还可以考虑使用`...
vue更新数据后重新请求数据并刷新页面
qq_43761240的博客
05-23 2815
首先要配置好路由 在app.vue添加下面代码 export default { provide() { return { reload: this.reload, } }, data() { return { isRouterAlive: true, } }, methods: { reload() { this.isRouterAlive = false this.$nextTick(fun
Vue的--是什么--特点--核心概念--开发模式--常用修饰符--指令--总结
KBK2020的博客
07-20 298
vue是什么 是一个致力于打造构建用户界面的渐进式框架 vue的特点 简单易学：国⼈开发，中⽂⽂档，不存在语⾔障碍 ，易于理解和学习； 灵活：它可以与已知第三方工具（vuex），第三方Ui库（elementUi）（vant），结合使用 高效：虚拟dom，diff算法，大大的提升了页面的运行效率 轻量级框架：只关注视图层，是⼀个构建数据的视图集合，⼤⼩只有⼏⼗kb 双向数据绑定：在数据操作方面更为简单 组件化：实现了html的封装和重⽤，在构建单⻚⾯应⽤⽅⾯有着独特的优势； 视图，数据，结构分离：使数据的更
Vue基础--Vue中的常见基础指令详解
qq_44749491的博客
09-24 1558
Vue中的基础指令
Vue项目增、删、改、查刷新当前页面
weixin_44858809的博客
06-10 259
记录下自己做Vue项目遇到问题的解决方法 Vue中使用provide / inject 组合刷新当前页 1.打开App.vue 声明reload方法，控制router-view的显示或隐藏，从而控制页面的再次加载 <template> <div id="app"> <router-view v-if="isRouterAlive"></router-view> <!-- 添加router-view --> </div
vue，新增数据后，刷新数据列表，赋值后不渲染问题
渔火江渚上的博客
05-20 1788
一、问题 vue，新增数据后，list数据同步为最新，但赋值后不渲染问题。 二、解决问题的经过 用watch监听list，然后this.forceUpdate()，this.set()，或者用一个值在在v-if里，包括定时器都没用。 当调用完查询list的api并赋值，只有list的数据量是偶数时才渲染最新数据，否则得手动F5刷新。 三、问题的最终解决 把查询list并赋值放在add api的回调里。 ...
vue2自定义指令-防抖
最新发布
08-22
在Vue2中，自定义指令（Custom Directives）是一种扩展Vue功能的方式，允许开发者对DOM进行更精细的操作。本文将深入探讨如何创建一个防抖（Debounce）自定义指令，以优化性能，尤其是在处理频繁触发的事件时，如...
Vue中fragment.js使用方法小结
11-21
例如，使用`setTimeout`分批处理，或者先创建一个`div`容器，将所有元素添加到容器后再一起插入： ```javascript // 分批处理 var i = 0, max = 10000; setTimeout(function addNodes() { for (var step = i + 500...
vue自定义指令Vuedirective实现点击水波纹效果
08-12
在Vue中，自定义指令（Vuedirective）是扩展其功能的一种强大机制，它们可以用来处理DOM操作，增加特殊的行为或者响应特定事件。在这个场景中，我们要讨论的是如何使用Vue自定义指令来实现点击后的水波纹效果。 ...
解决vue的变量在settimeout内部效果失效的问题
12-02
解决方法如下： 1、定义一个self暂存this 2、再改变变量的值，则生效啦 var self=this; this.toastrVal = inVal; this.loadState = true; this.noBg = bgState; setTimeout(function () { self.loadState = false; }, 3000) 拓展知识：解决vue在setTimeout内修改this失效的问题 当在vue中使用定时器来修改一个变量值的时候，发现没有效果，这是由于setTimeout函数调用的代码运行在与所
基于Vue的简单tooltip工具
08-09
- **定义组件**: 在Vue中，组件是可重用的代码块，可以通过`Vue.component()`全局注册，或者在单文件组件（Single File Component, SFC）中定义。 - **模板语法**: Vue模板语法允许我们在HTML中嵌入JavaScript...
vue项目中编辑、新建、删除、查找或者其他的操作成功后如何让其页面自动刷新
qq_66180056的博客
07-12 3370
vue项目中编辑、新建、删除、查找或者其他的操作成功后如何让其页面自动刷新
vue页面刷新的4种方法
weixin_44271360的博客
07-13 1808
1.window.location.reload(), 是原生JS提供的方法， this.$router.go(0):是vue路由里面的一种方法， 这两种方法都可以达到页面刷新的目的，但是用户体验不好。 2.创建一个空白页面（页面进行一个无感刷新） 3、控制的显示与否，在全局组件注册一个方法，该方法控制router-view的显示与否，在子组件调用即可; eg: data () { return...
phpstudy页面不存在_页面刷新vuex数据消失
weixin_39992660的博客
11-21 212
1、前言vue构建的项目中，vuex的状态存储是响应式的，当vue组件从store中读取状态的时候，若store中的状态发生变化，那么相应的组件也会得到高效刷新，问题来了，vuex存储的数据只是在页面中，相当于我们定义的全局变量，刷新之后，里面的数据就会恢复到初始化的状态。比如，用户已经登录了，我把登录状态放到state中了，一刷新页面，还要重新登录？购物车里的添加的数据，一刷新要重新添加？2、使...
@manytomany 保存后数据被删除_vue主动刷新页面及列表数据删除后的刷新方法
weixin_39875419的博客
11-22 384
一、场景在处理列表时，常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。二、遇到的问题1. 用vue-router重新路由到当前页面，页面是不进行刷新的2.采用window.reload()，或者router.go(0)刷新时，整个浏览器进行了重新加载，闪烁，体验不好三、解决方法provide / inject 组合作用：允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深...
Vue.js中this.$nextTick()的使用
yanzi_0216的博客
11-29 155
Vue.js中this.$nextTick()的使用 this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。 假设我们更改了某个dom元素内部的文本，而这时候我们想直接打印出这个被改变后的文本是需要dom更新之后才会实现的，也就好比我们将打印输出的代码放在setTimeout(fn, 0)中； 先来第一个例子看一看 <template
vue——执行增删改操作后刷新页面
weixin_40677985的博客
08-28 5292
一、使用场景 使用vue开发管理后台页面，执行增加删除修改的功能后，列表并不会马上显示最新的数据，需要刷新当前页面获取到最新的数据，但使用window.reload( ) 或 router.go(0)的话整个浏览器会重载，用户体验不太友好。 那么推荐使用provide / inject 的方法来解决这个需求。 二、provide/inject方法 vue官方文档：这对选项需要一起使用，以允...
vue在进行增删改操作后刷新页面
weixin_44464482的博客
05-26 9189
问题 在项目中，对数据进行增删改查是一种常规操作。在进行这些操作并完成后，可能会遇到需要手动刷新才能更新列表的情况。 解决方案 || 以删除为例： 1.简单的操作：不需要重新调用接口 2.使用window.reload( ) 或 router.go(0)，整个浏览器进行了重新加载，页面闪烁 3.重新调用接口； 4.provide / inject 点此查看VUE官方解释： 允许一个祖先组件...
Vue面试精粹：140+题解，涵盖Vuex、Vue-Router与性能优化
"这是一份关于前端Vue面试的精选题集，包含了140多道题目...在Vue中，可以通过v-for指令结合动态绑定src属性来循环插入图片，例如`<img v-for="item in images" :src="item.url" />`，其中images是包含图片URL的数组。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值