vue避免重新渲染_详解强制Vue组件重新渲染的方法
在某些情况下,我们必须强制Vue重新渲染组件,如果没有,那可能,你做的业务还不够负责,反正我是经常需要重新渲染组件,哈哈。
虽然Vue不会自动更新这种情况是相对比较少,但是知道如何在出现这个问题时修复它还是很有用的。
在大多数情况下,此问题根源还是我们对 Vue 的响应式理解还是不够到位。 因此,要尽量确保我们要正确使用了Vue。 响应式有时过于棘手,我也经常不知道所措。
这节,我们就来做一些之前很少做过或者没做过的:用 key 来让组件重新渲染。
在这篇文章中,会涉及到这几个知识点:key 是如何改变组件
key 如何与多个子组件一起工作
如何强制子组件自己更新
通过改变 key 的值来重新渲染组件
我最喜欢的方法是使用key属性,因为使用key 的方式,Vue 就知道了特定组件与特定数据相关。
如果 key保持不变,则不会更改组件。 但是,如果key发生更改, Vue 知道它应该删除旧组件并创建一个新组件。
下面是一个非常基本的方法:
:key="componentKey"
/>
export default {
data() {
return {
componentKey: 0,
};
},
methods: {
forceRerender() {
this.componentKey += 1;
}
}
}
每次调用forceRerender时,componentKey 的值就会更改。 当componentKey 的值发生改变时,Vue 就知道把ComponentToReRender组件删除并创建一个新组件。
这样ComponentToReRender就会重新渲染并重置里面的状态。nice nice!
强制多个子节点进行更新
同样用这种方式也可以用于多个子组件:
:key="key1"
/>
:key="key2"
/>
export default {
data() {
return {
key1: 0,
key2: 0,
};
},
methods: {
forceRerender(child) {
if (child === 1) {
this.key1 += 1;
} else if( child === 2) {
this.key2 += 1;
}
}
}
}
这里我们使用了两个单独 key 来分别控制每个子组件是否重新渲染。将它们分开是为了其中的一个子组件渲染,不会影响到另外另一个。
但如果希望两个子组件总是一起更新,则可以使用相同的 kye。但是,key必须是唯一的,所以下面这种方式,不能工作:
:key="componentKey"
/>
:key="componentKey"
/>
export default {
data() {
return {
componentKey: 0,
};
},
methods: {
forceRerender(child) {
this.componentKey += 1;
}
}
}
在这里,仅第一个Child组件会被渲染。 第二个被忽略,因为它具有重复的key 了。
为了解决这个问题,我们可以基于componentKey为每个孩子构造一个新key:
:key="`${componentKey}-1`"
/>
:key="`${componentKey}-2`"
/>
export default {
data() {
return {
componentKey: 0,
};
},
methods: {
forceRerender(child) {
this.componentKey += 1;
}
}
}
因为我们每次在componentKey后面添加-1和-2,所以这两个key始终是唯一的,现在这两个组件都将被重新渲染。
如果是在列表中,则可以使用如下方式:
v-for="(item, index) in list"
:key="`${componentKey}-${index}`"
/>
export default {
data() {
return {
list: [
// ...
],
componentKey: 0,
};
},
methods: {
forceRerender(child) {
this.componentKey += 1;
}
}
}
在这里,我们将key构造为${componentKey}-${index},因此列表中的每个项目都会获得唯一的key,只要componentKey一改变,列表中的所有组件将同时重新渲染。
当然,还有更简单的方式,就是用div把列表包裹起来,直接对 div重新更新就行了:
v-for="item in list"
:key="item.id"
/>
export default {
data() {
return {
list: [
// ...
],
componentKey: 0,
};
},
methods: {
forceRerender(child) {
this.componentKey += 1;
}
}
}
这中思路可以用在很多地方,可以为我们摆脱很的困境,大家要牢记起来。
vue避免重新渲染_详解强制Vue组件重新渲染的方法相关推荐
- filter vue 循环_详解在Vue.js编写更好的v-for循环的6种技巧
在vuejs中,v-for循环是每个项目都会使用的东西,它允许您在模板代码中编写for循环. 在最基本的用法中,它们的用法如下. {{ product.name }} 但是,在本文中,我将介绍六种方法 ...
- vue连接后端本地接口_详解vue配置后台接口方式
详解vue配置后台接口方式 在vueAdmin项目中有两种方式配置后端接口的方式,在此做下记录 第一种(代理方式) 在工程目录下 > config > index.js - 修改为如下配置 ...
- python可以播放音乐吗_详解python播放音频的三种方法
第一种 使用pygame模块 pygame.mixer.init() pygame.mixer.music.load(self.wav_file) pygame.mixer.music.set_vol ...
- python调用cmd命令释放端口_详解python调用cmd命令三种方法
目前我使用到的python中执行cmd的方式有三种 使用os.system("cmd") 该方法在调用完shell脚本后,返回一个16位的二进制数,低位为杀死所调用脚本的信号号码, ...
- python获取mysql中的数据供js调用_详解js文件通过python访问数据库方法
我来教你 js文件怎么通过python访问数据库,希望能够为你带来帮助. 1.如果是要提交表单内容给 服务器的 python 处理,那么只需要在表单 里面的 action 填写服务端的处理路由就可以了 ...
- java的注解方式_详解Java注解的实现与使用方法
详解Java注解的实现与使用方法 Java注解是java5版本发布的,其作用就是节省配置文件,增强代码可读性.在如今各种框架及开发中非常常见,特此说明一下. 如何创建一个注解 每一个自定义的注解都由四 ...
- mysql 日期比较_详解Mysql中日期比较大小的方法
假如有个表product有个字段add_time,它的数据类型为datetime,有人可能会这样写sql: 代码如下 select * from product where add_time = '2 ...
- pillow属于python标准库吗_详解Python图像处理库Pillow常用使用方法
PIL(Python Image Library)是python的第三方图像处理库,但是由于其强大的功能与众多的使用人数,几乎已经被认为是python官方图像处理库了. 其官方主页为:PIL. PIL ...
- dom不刷新 vue 加数据后_详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结...
如果你发现你自己需要在 vue 中做一次强制更新,99.9% 的情况,是你在某个地方做错了事. 1. vue 无法检测实例被创建时不存在于 data 中的 property 原因:由于 vue 会在初 ...
最新文章
- sass文件编译的三种方式【舒】
- python反转单链表
- oracle sql 调用自定义函数_PSCAD入门教程(第7节):怎样调用fortran编写的自定义函数?(附模型)...
- JavaWeb(五)——Servlet、Mapping问题、ServletContext
- 【mysql学习】疑问点记录
- 网络知识:视频监控传输带宽与存储容量的计算方法
- 代号“凤凰”,阿里新零售秘密武器,今年要打入100个城市
- Activity-在ListFragment中为ListView增加空白视图
- 如何有效地遍历Java Map中的每个条目?
- GitHub 日收 12,000 星,微软新命令行工具引爆程序员圈!
- 【雷达通信】基于matlab CDIF算法雷达信号分选【含Matlab源码 1186期】
- SPSS学习笔记(六)线性相关及回归
- c语言图片百叶窗特效,Flash遮罩特效实例--百叶窗效果
- 【读书笔记】《谈谈方法》(笛卡尔)
- ExtJS 更改penal标题栏样式
- 微信屏蔽网址的解决办法:366API轻松实现被微信屏蔽的网址在微信内正常访问
- h5 nan_易企秀资深前端架构师袁飞:移动H5开发如何避坑
- 自律-克服不良习惯读后感
- Codeforces Round #777 (Div. 2) 简训
- 清华、北大、浙大的计算机课程资源集都在这里了