最近用el-avatar组件做了头像上传实时浏览的容器，发现头像不更新...数据更新之后，图片并没有更新，DOM绑定的图片不会变。
经过排查发现上传的图片地址拿得到也能正常访问，说明图片链接本身没有问题。el-avatar组件绑定的:src赋值也能打印，说明数据也能成功绑定。
image.png
<el-avatar :src="userForm.userHead"></el-avatar>
由于头像上传需要时间，起初以为是异步DOM更新的问题，于是用了this.$nexTick来重新设置头像链接更新头像
this.$nextTick(()=>{
this.userForm.userHead=url;
})
解决了上传头像不能实时更新的问题...,但是问题又来了，由于这是用户表单，在做数据回填的时候，假如用户头像地址是无法正常访问的情况（比如头像地址文件被后端删除了），那么这时候我们想重新上传，头像又无法实时更新了。$nextTick也不管用。。。那么我自然而然想到了让DOM强制更新...
this.$set(this.userForm,'userHead',url)
然鹅....并没有什么卵用。。。。
这时候百度看到一篇文章说如果使用了vue-lazyload懒加载，图片不更新就加:key
原文地址：
https://www.cnblogs.com/MrLee/p/10899447.html
看了下自己的webpack配置，并没有使用vue-lazyload懒加载，但是抱着试一试的态度也加上了:key
<el-avatar :src="userForm.userHead" :key="userForm.userHead"></el-avatar>
啥都好使了....根本不用其他方式去更新DOM。
在开发中遇到了很多次没有key值导致的DOM不更新的问题，由此可见key索引在性能优化上的重要性。。。
仅以此记录一下这个解决问题的过程和思路，让更多碰到此问题的踩坑伙伴们能够受益....
网友评论