Vue组件强制刷新(重新渲染)的四种方案对比

文章目录

  • 前言
  • 一、刷新整个页面
  • 二、使用v-if标记
  • 三、forceUpdate
  • 四、key-changing
  • 五、应用场景
      • vue具有缓存的页面的强制刷新
      • 进入页面输入框自动聚焦


前言

Vue的双向绑定属于自动档;在特定的情况下,需要手动触发“刷新”操作,目前有四种方案可以选择:

  1. 刷新整个页面(最low的,可以借助route机制)
  2. 使用v-if标记(比较low的)
  3. 使用内置的forceUpdate方法(较好的)
  4. 使用key-changing优化组件(最好的)

一、刷新整个页面

router.go(0)

二、使用v-if标记

如果是刷新某个子组件,则可以通过v-if指令实现。我们知道,当v-if的值发生变化时,组件都会被重新渲染一遍。因此,利用v-if指令的特性,可以达到强制刷新组件的目的。

<template><comp v-if="refresh"></comp><button @click="refreshComp()">刷新comp组件</button>
</template>
<script>
import comp from '@/views/comp.vue'
export default {name: 'parentComp',data() {return {refresh: true}},methods: {refreshComp() {// 移除组件this.refresh = false// 在组件移除后,重新渲染组件// this.$nextTick可实现在DOM 状态更新后,执行传入的方法。this.$nextTick(() => {this.refresh = true})}}
}
</script>

三、forceUpdate

组件内置$forceUpdate方法,使用前需要在配置中启用。

import Vue from 'vue'
Vue.forceUpdate()
<template><div><button @click="handleUpdateClick()">Refresh当前组件</button></div>
</template>
export default {methods: {handleUpdateClick() {// built-inthis.$forceUpdate()}}
}

四、key-changing

原理很简单,vue使用key标记组件身份,当key改变时就是释放原始组件,重新加载新的组件。

<template><div><span :key="key"></span></div>
</template>
<script>export default {data() {return {key: 0}},methods: {handleUpdateClick() {this.key += 1 // 或者 this.key = new Date();}}}
</script>

五、应用场景

vue具有缓存的页面的强制刷新

有些列表页面需要进入详情返回时有缓存功能,但是每次进入列表页面又需要刷新列表,这种时候就需要手动刷新页面

const routerConfig = {path: "/List",query: {time: new Date().getTime(),}
};
this.goPath(routerConfig);
List.vuecreated () {this.initData();this.preTime = Number(this.$route.query.time);
},
activated () {const curTime = Number(this.$route.query.time);if(this.preTime !== curTime) {document.documentElement.scrollTop = 0;this.preTime = curTime;this.listInfo = {pageSize: 10,pageContext: '',hasMore: false,list: [],};this.initData();}
},

goPath是vue跳转的一个封装

main.js
/*** 根据前端路由跳转到webview* @param config* @param type inPage: 利用h5路由跳转*/
Vue.prototype.goPath = function (routerConfig, type = 'web') {const config = routerConfig;// 统一添加参数if (this.$route.query.isSelfManage === '1') {config.query.isSelfManage = 1;}console.log(config);if (window.__wxjs_environment === 'miniprogram') {if (window.wx) {const params = this.$router.resolve(config).href;// 添加参数,兼容跳转问题const toUrl = `${location.protocol}//${location.host}${location.pathname}${location.search}${params}`;if (type === 'web') {window.wx.miniProgram.navigateTo({url: `/pages/webview/index?url=${encodeURIComponent(toUrl)}`,});} else if (type === 'inPage') {this.$router.push(config);if (!config.replace) {this.$router.push(config);} else {this.$router.replace(config);}} else {window.wx.miniProgram.navigateTo(config);}}} else {if (!config.replace) {this.$router.push(config);} else {this.$router.replace(config);}}
};

进入页面输入框自动聚焦

一般情况下,加上以下代码就可以聚焦

<template><div><inputplaceholder="大家都在搜"type="text"maxlength="500"v-model="inputInfo.msg"@blur="resizeView"v-focus></div>
</template>
<script>export default {data() {return {inputInfo: { // 输入框对象num: 0, // 字数msg: '' // 内容},}},watch: {[`options.msg`] () {let length = utils.fancyCount2(this.inputInfo.msg);this.$set(this.inputInfo, 'num', length);}},directives: {focus: {// 指令的定义inserted: function(el) {el.focus();}}},methods: {/*** input元素失去焦点时触发*/resizeView () {document.body.scrollIntoView(true);},}}
</script>

但是在有缓存的页面,一般就只有第一次会聚焦,后面进入都不会聚焦,办法就是用第四种强制刷新输入框来聚焦

<template><div><inputplaceholder="大家都在搜"type="text"maxlength="500"v-model="inputInfo.msg"@blur="resizeView"v-focus:key="inputInfo.focus"><button @click="handleUpdateClick()">Refresh当前组件</button></div>
</template>
<script>export default {data() {return {inputInfo: { // 输入框对象num: 0, // 字数msg: '', // 内容focus: '',},}},activated () {this.inputInfo.focus = new Date().getTime();},methods: {handleUpdateClick() {// built-inthis.inputInfo.focus = new Date().getTime();}}
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/401397.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AOJ 0525 Osenbei【穷竭搜索】

AOJ 0525 题意&#xff1a; 有一个烤饼器可以烤r行c列的煎饼&#xff0c;煎饼可以正面朝上&#xff08;用1表示&#xff09;也可以背面朝上&#xff08;用0表示&#xff09;。一次可将同一行或同一列的煎饼全部翻转。现在需要把尽可能多的煎饼翻成正面朝上&#xff0c;问最多能…

wp imei

由于WP8SKD不提供获取机子IMEI的方法&#xff0c;所以无法得到机子IMEI&#xff0c;但是SDK提供一另一个获取唯一ID的方法&#xff0c;在Microsoft.Phone.Info.DeviceExtendedProperties里面的DeviceUniqueId。 通过这个方法可以获得. 参考 wp8sdk有关DeviceExtendedProperties…

css-如何对每行中最后一个元素删除边距?

文章目录前言一、负边距一、nth-child()系列)前言 如何从最后一列的每个元素中删除边距&#xff1f; 在元素宽度不确定的情况下&#xff0c;或者如果屏幕很小或用户调整浏览器大小&#xff0c;则每行排列的个数就不确定 因此&#xff0c;在任何情况下&#xff0c;最后一列中出…

Cntlm安装和配置心得

2019独角兽企业重金招聘Python工程师标准>>> 对于那些使用NTLM进行身份验证的网络代理环境&#xff08;即设置上除需要代理主机和端口之外还需要提供域用户和密码&#xff09;来说&#xff0c;通过代理上网是一件头痛的事情&#xff0c;这主要是因为很多软件不支持N…

vim插件之cscope的安装与配置

本文参考自&#xff1a; http://easwy.com/blog/archives/advanced-vim-skills-cscope/ http://blog.csdn.net/dengxiayehu/article/details/6330200 http://blog.csdn.net/daofengdeba/article/details/7606616 插件介绍&#xff1a; cscope是用来查看源代码的工具&#xff0c…

字符串编辑距离(转载)

Levenshtein Distance (LD, 来文史特距离)也叫edit distance(编辑距离)&#xff0c;它用来表示2个字符串的相似度&#xff0c;LD定义为需要最少多少步基本操作才能让2个字符串相等&#xff0c;基本操作包含3个&#xff1a;插入, 删除, 替换&#xff1b;比如&#xff0c;kiteen和…

css媒体查询(手机、平板、PC)

List item css媒体查询PC端按屏幕尺寸整理? 通过上面的电脑屏蔽及尺寸的例表上我们得到了几个宽度 1024 1280 1366 1440 1680 1920 超小屏幕 手机 (<768px) 小屏幕 平板 (≥768px) 中等屏幕 桌面显示器(≥992px) 大屏幕 大桌面显示器 (≥1200px) /* 超小屏幕&#xff08…

C/C++面试题(一)

1、局部变量能否和全局变量重名&#xff1f;答&#xff1a;能&#xff0c;局部会屏蔽全局。局部变量可以与全局变量同名&#xff0c;在函数内引用这个变量时&#xff0c;会用到同名的局部变量&#xff0c;而不会用到全局变量。对于有些编译器而言&#xff0c;在同一个函数内可以…

读书摘录(二)

人们只能听到自己喜欢听的&#xff0c;只能看到自己喜欢看的。博弈论中的一个关键教训&#xff1a;你需要了解对方的想法。你需要考虑他们知道些什么&#xff0c;是什么在激励着他们&#xff0c;甚至他们是怎么看你的。无论你多努力&#xff0c;你都很有可能完全没有机会做到富…

hbase配置详解(转)

转自&#xff1a;http://www.cnblogs.com/viviman/archive/2013/03/21/2973539.html 1 准备工作 因为我只有一台机器&#xff0c;所以&#xff0c;一切都成为了伪分布&#xff0c;但是&#xff0c;其实和集群是一样的啦。 在hbase配置之前&#xff0c;先确定自己的linux上有两个…

js rem 单位适配(手机、平板、PC)?

js rem单位适配<script type"text/javascript">// 设备区分 &#xff08;安卓、火狐、平板、PC&#xff09;var os function() {var ua navigator.userAgent,isAndroid /(?:Android)/.test(ua),isFireFox /(?:Firefox)/.test(ua),isTablet /(?:iPad|Pl…

hdu 4160 Dolls (最大独立)

点击打开链接 需要排下序。。 #include"stdio.h" #include"string.h" #include"stdlib.h" #define N 501 struct node {int a,b,c; }aa[N]; int map[N][N],v[N],link[N]; int n; int cmp(const void*a,const void*b) {struct node *c,*d;c(struc…

破解中国电信华为无线猫路由(HG522-C)自己主动拨号+不限电脑数+iTV

中国电信总是把好好的一个路由猫阉割过后放在我的E家套餐里到处兜售&#xff08;垄断市场也就罢了&#xff0c;还有非常多霸王条款&#xff0c;比方必须使用它们的手机&#xff0c;同一时候最多多少台电脑上网等等&#xff09;&#xff0c;曾经破解过另外一个中国电信的路由猫&…

移动端适配(必须要知道的,亲测有效)

关于移动端适配&#xff08;必须要知道的&#xff0c;亲测有效&#xff09;一、各种单位概念理解二、移动&#xff0c;web开发三、移动端适配1、视口(viewport)概念2、视口(viewport)适配&#xff08;代码&#xff09;3、rem单位适配flexible方案竖屏、横屏、ipad、PC最全的适配…

silverlight 如何在浏览器的新页面里打开一个xaml

这个问题搜了大半天&#xff0c;综合各方观点&#xff0c;还是把它给实现了&#xff0c;小有成就感 打开一个新的浏览器窗口&#xff0c;silverlight并不支持这种做法。打开一个新的浏览器窗口意味着打开另一个应用页面。只需要获得那个应用的url&#xff08;如http://www.163.…

如何安装MySQL软件

1 双击EXE进行安装&#xff0c;在"Developer Components&#xff08;开发者部分&#xff09;"上左键单击&#xff0c;选择"This feature, and all subfeatures, will be installed on local hard drive."&#xff0c;即"此部分&#xff0c;及下属子部…

使用curl登陆上网账号

我们学校要上外网必须要使用校园账号登陆&#xff0c;一般都是使用客户端&#xff0c;但是也可以使用web版登陆。最近装了一台服务器&#xff0c;因为是纯字符界面的ubuntu&#xff0c;所以要想安装软件&#xff0c;得联外网&#xff0c;没办法使用客户端或网页形式&#xff0c…

KM 最优匹配 讲解

转&#xff1a; 基本原理 该算法是通过给每个顶点一个标号&#xff08;叫做顶标&#xff09;来把求最大权匹配的问题转化为求完备匹配的问题的。设顶点Xi的顶标为A[ i ]&#xff0c;顶点Yj的顶标为B[ j ]&#xff0c;顶点Xi与Yj之间的边权为w[i,j]。在算法执行过程中的任一时刻…

前端开发问题记录

小程序开发问题记录多行省略&#xff08;小程序&#xff09;image 图片底部留白单元素如何实现&#xff1a;文本、边框渐变&#xff1b;且边框满足移动端细边框效果&#xff08;小程序&#xff09;在util.js中使用getApp()这个函数&#xff0c;打印显示undefined多行省略 &…

长沙理工大学校园网客户端无法卸载解决办法

2019独角兽企业重金招聘Python工程师标准>>> 删除X:\Program Files (x86)\InstallShield Installation Information\{。。。}目录即可。&#xff08;&#xff09; 转载于:https://my.oschina.net/ZaneYoung/blog/330747