vue 手动刷新渲染

最新推荐文章于 2024-06-21 08:48:28 发布
最新推荐文章于 2024-06-21 08:48:28 发布
阅读量2.1k 收藏 2
点赞数 1
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/PPPP_X/article/details/104996546
版权

今天在做一个vue的小项目功能，通过vuex里的mapGetters，把里面的数据保存在计算属性里，然后template通过这个数据渲染到页面上，这个功能需要通过点击来更新数据，由于需要更新的数据是对象的属性，在mapMutations里更新到计算属性后，页面并不会重新渲染，因此计算属性不会进行深度监听，即对象里的属性。
这个时候，vue给我们提供了一个强制重新渲染的函数： this. f o r c e U p d a t e ( ) ; 修 改 完 数 据 后 执 行 这 个 函 数 ， 会 刷 新 渲 染 当 前 页 面 ， 但 是 不 会 影 响 到 其 他 页 面 和 组 件 。 而 我 在 另 外 的 组 件 页 面 b 里 也 需 要 同 样 修 改 数 据 同 步 的 功 能 ， 由 于 我 使 用 了 k e e p − a l i v e 缓 存 了 页 面 ， 刚 才 使 用 的 t h i s . forceUpdate();修改完数据后执行这个函数，会刷新渲染当前页面，但是不会影响到其他页面和组件。 而我在另外的组件页面b里也需要同样修改数据同步的功能，由于我使用了keep-alive缓存了页面，刚才使用的this. forceUpdate();修改完数据后执行这个函数，会刷新渲染当前页面，但是不会影响到其他页面和组件。而我在另外的组件页面b里也需要同样修改数据同步的功能，由于我使用了keep−alive缓存了页面，刚才使用的this.forceUpdate()函数只是刷新了页面b，影响不到需要更新的页面a，这个时候可以使用vue提供的钩子activated，可以在缓存路由被激活时触发，再重新在里面执行this.$forceUpdate() 重新渲染

PPPP_X
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue项目如何刷新当前页面的方法
08-27
主要介绍了vue项目如何刷新当前页面的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue.js实现刷新当前页面的方法教程
12-10
前言 Vue.js（是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，是一种数据驱动的前端框架 我们在开发vue的页面的时候，有时候会遇到需要刷新当前页面功能，但是vue框架自带的router是不支持刷新当前页面功能的，它只支持在路由路径变化时刷新页面。基于这个原理，为了实现刷新页面，可以先跳转到一个空页面，然后马上跳回来，从而实现这个功能。 开发工具环境 vue.js webstorm 方法如下 一、原理 如上图所示，我们需要为要刷新的页面A编写一个自动跳回的空页面，当用户操作了A页面后，A页面先跳转到
Vue 手动重新渲染组件（重置或者更新）
热门推荐
人与人之间最小的差别是智商，最大的差别是坚持。
06-15 2万+
问题描述：一、当数据通过异步操作后，对之前加载的数据进行变更后，发现数据不生效。 二、A组件或者B组件触发数据更新，C组件数据更新了，但是C组件仍显示上一次数据。 方案一：v-if（可以重置生命周期） 需要重新渲染的组件 改变数据状态的组件，我在vuex种改变了type状态（这个type可以在你需要触发的位置改变） 方案二 ：：......
【vuejs】$forceUpdate 的使用和讲解
最新发布
工作的日常记录和平凡的生活分享
06-21 2535
forceUpdate是Vue实例的一个内置方法，用于强制Vue组件重新渲染。通常情况下，Vue的响应式系统能够自动检测到数据的变化并更新DOM，但在某些特定情况下，可能需要手动触发重新渲染，$forceUpdate方法在这些场景下非常有用。
Vue 刷新当前页面
mazaiting的博客
08-17 1741
1). location方式 location.reload() 2). router方式 this.$router.go(0) 3). provide/inject方式 App.vue <script> export default { name: 'App', // 提供reload方法 provide:...
Vue刷新当前页面几种方式
高先生的猫
05-15 7464
问题 最近些日子项目中突然碰到了一个需求，再完成编辑操作之后需要进行页面刷新，通过实验有如下几种姿势可以解决需求中的问题，下面进行简单总结如下。 姿势一：this.$router.go(0) 这个姿势是利用了 history 中前进和后退的功能，传入 0 刷新当前页面。但是有一个问题就是页面整个刷新过程中会白屏，严重影响用户的体验感，效果不好。 this.$router.go(0) 姿势二：location.reload() 这个姿势是利用了直接使用刷新当前页面的方法。但是同样存在
VUE 组件手动渲染、组件延迟渲染
oMangGuoBuDing1的专栏
04-07 1270
有时候组件中数据还没准备好，或者是强依赖的变量还没有构造好 的时候如果 可能需要等数据构造完之后再手动渲染 这种需求的解决方案 是灵活使用v-if 因为v-if是false时组件不会被渲染。当数据构造完成后再设为true 这时才渲染组件 解决 tab 抽屉组件 时发现的解决方案 ...
vue页面刷新
weixin_52767262的博客
03-24 1万+
vue页面刷新 首先我们都知道vue属于单页面应用，默认境况下是不会触发刷新页面操作的，所以这个时候就需要我们通过事件来触发reload()来达到刷新操作 接下来我就为大家介绍三种刷新页面的方法 1. wiindow.location.reload([bForceGet]) 该方法强迫浏览器刷新当前页面 bForceGet 可选参数，默认为false,从客户端缓存里取当前 true,则以get方式，从服务器端获取最新的页面，相当于页面f5刷新 wiindow.location.replace(URL)
手写vue（三）模板渲染解析
ZepngLin的博客
04-19 898
vue是如何重新解析，并且生成新的DOM对象的呢？ 1、模板解析 2、生成渲染函数 3、生成虚拟dom 4、生成真实dom，替换Vue容器
关于vue中页面刷新
月来better
01-18 155
原生js页面刷新： window.location.reload() vue中页面刷新： this.$router.go(0) 以上两种刷新方法会出现闪的效果，相对来讲，这对用户的体验不是很好，那有页面刷新既不闪，还能实现页面刷新的效果呢？有，如下： 1.App.vue: <template> <div id="app"> <router-view v-if="isRouterAlive"/> </div> </template&gt
vue强制或手动渲染(重绘)页面,
DDAD9527的博客
11-16 2569
vue重绘
vue刷新当前页面
hyduan_h5的博客
01-12 1481
我们经常遇到此种情形，当新增编辑完成后，需要重新刷新页面数据，重新调用接口较多时，挨个调用过于繁琐；
工作160:总结VUE几种页面刷新方法
歌谣的博客
11-26 300
有时候在页面里做了某些操作以后，需要页面刷新一下来重新获取数据。试了几种方法，以下总结： 1、this.$router.go(0) 这种方法页面会一瞬间的白屏，体验不是很好，虽然只是一行代码的事 2、location.reload() 这种也是一样，画面一闪，效果总不是很好 3、跳转空白页再跳回原页面 在需要页面刷新的地方写上：this.$router.push('/emptyPage')，跳转到一个空白页。在emptyPage.vue里beforeRouteEnter钩子里控制页面跳转，从而达到刷新的效.
# vue刷新当前页面
qq_29247839的博客
03-22 874
在项目开发中遇到了需要刷新当前页面的场景。中途尝试了以下四种方法1、this.forceUpdatethisforceUpdate() 是Vue.js中的一个方法，用于强制组件重新渲染，即使没有响应式数据发生变化。在history记录中前进或者后退val步，当val为0时刷新当前页面。可以简单地实现当前页面的刷新，这个方法会重新加载当前页面，类似于用户点击浏览器的刷新按钮。这个方法会重新加载当前URL所对应的页面，从而实现页面的刷新效果。
vue页面刷新方式
Smile_ping的博客
06-26 457
vue刷新页面方式
vue刷新页面方法
Altaird的博客
08-17 469
（1）reload location.reload(); reload() 方法类似于你浏览器上的刷新页面按钮。 （2）replace window.location.replace("") replace()方法用一个新的地址替换当前地址。 （3）provid 和 inject <template> <div id="app"> <router-view v-if="isRouterAlive"/> </div> </templat
vue页面刷新功能的实现
杨园园的博客
08-27 1204
主要是路径设置的问题 将页面index.html 中的script改成如下： &lt;script src="../dist/build.js"&gt;&lt;/script&gt;
vue项目中刷新页面的方法
mq1314520_zhl的博客
01-04 911
注意：这种方法也需要使用Vue Router，并且需要在main.js中引入router实例。这种方法的原理是先跳转到一个特定的路径，再返回上一个页面，从而达到刷新页面的目的。注意：这种方法需要使用Vue Router，并且需要在main.js中引入router实例。以上是一些常见的刷新页面的方法，在不同的场景下可以选择适合的方法使用。
vue页面刷新当前页的方法
sinat_42684420的博客
01-15 1881
关于vue项目刷新当前页面，我试了一些方法，最终找到了一个目前我所知道最棒的方法。 记录如下： 在App.vue声明reload方法，控制router-view的显示或隐藏，从而控制页面的再次加载 在App.vue页面代码： <template> <div id="app"> <router-view v-if="isRouterAlive">&lt...
vue 手动刷新组件数据
09-08
在Vue中，如果需要手动刷新组件数据，通常可以使用以下几种方法： 1. 使用Vue的内置方法强制重新渲染组件。可以通过在组件中使用`this.$forceUpdate()`方法来强制重新渲染组件，从而更新组件中的数据。 2. 手动调用组件的方法来更新数据。可以在组件中定义一个方法，然后在需要更新数据的地方手动调用该方法来更新组件中的数据。例如，在点击按钮或响应某个事件时调用该方法。 3. 使用Vue的响应式数据机制更新数据。Vue的数据是响应式的，意味着当数据发生变化时，相关的DOM元素会自动更新。因此，如果需要手动刷新组件数据，只需要改变数据的值即可。 4. 使用Vue提供的实例方法 `$set`或`Vue.set`来更新数据。当需要改变嵌套数据中的某个属性值时，可以使用`$set`方法来设置新值。例如，`this.$set(object, key, value)`。 需要注意的是，Vue组件的数据更新通常是由Vue自动触发和处理的，而不需要手动刷新。通过Vue的响应式数据机制，当数据发生变化时，相关的DOM元素会自动更新。因此，除非有特殊的业务需求，一般情况下不需要手动刷新组件数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值