一 、v-for的key绑定
先上文档
可以看到,如果对于key的绑定会造成一些bug,而且往往这些bug是我们没有注意到的
例如如下代码
<div v-for="(item, key) in list" :key="key">{{item.text}}</div>
官方demo是绑定的itemid ,但是在具体的开发场景中,可以没有id或者可以绑定的值,之前默认都绑了key,如上,但是在开发过程中遇到BUG,给各位复现
1. 先清空列表第二条text的值,然后删除了第二条
2. 结果列表虽然少了一个,但是现在的第二条,也就是之前的第三条,显示不符合预期,也被清空了
原因:
key值绑定没有变化,vue的diff默认不会重新来计算key为1的的div,导致页面渲染不符合预期
解决:
key值的绑定尽量保持唯一性,比如组合加上id或者list的length
二、$refs
这个就比较简单了,主要可能是页面引用ref比较多,然后疏忽了,在使用this.$refs访问时,不符合预期,原因是,页面内同一个ref重复了,这个vue不会抛出错误之类的,而是将对应的dom引用放到一个数组里面:
<div ref="aa"></div>
正常情况下:
this.$refs['aa'] // 即可访问Object
<div ref="aa"></div>
<div ref="aa"></div>
这是有可能因为疏忽引起的
此时this.$refs['aa'] // Array
三、router 和 route的区别
3.1 router
vue的路由对象,可以理解为vue用来管理整个spa的路由实例
可以从上面看到,它记录了router的挂载实例,整个路由的记录等等信息