- 标清
- 2.0x
- 1.5x
- 1.25x
- 1.0x
- 0.5x
Vue开发实战
精选留言(18)
2019-03-27测试发现，最好不要用index作为key，用index作为key有时候还会导致bug，尤其是item是具有某种状态的时候。。举个简单的例子，如果有ABC三个item，其中第一个A是选中的，这个时候如果我在A前面添加D，如果用index作为key就会变成D是选中的了，建议用唯一id来作为key作者回复: 👍
15
2019-04-11感觉挺好，这种讲法，不懂的自己私底下找各种资料，这样更深刻 9
2019-03-19场景一和场景四怎么区分的哦？作者回复: 场景1 bcd 是不同类型的节点，如 分别是span div p 三种类型 场景4是三个同类型节点，只是传递的属性不一致
5
2019-03-23老师你好, 看了评论知道子组件有状态的时候不能用index做key , 那么组件的状态是指data, props 这些数据吗, 什么是无状态组件呢, 他们跟key有什么关联?作者回复: 应该是子组件有自己的状态的时候，就是data。
他们和key本身没关系，但是如果你用了index作为key，当出现删除，排序后，状态就和你的预期不一样了，如 A1 A2 内部分别有自己的状态message 1和2 如果拿index做为key，逆序后变成A2 A1 但A2的message就变成了1 A1的message变成了2 2
2019-11-05老师，在树型结构中，移动操作的代价应该比删除/新增的高吧?所以在做节点移动的时候，应该是在旧位置删除节点，在新的位置新增节点，不知道这样的理解对不对。
另外，key 作为节点的唯一标识这里，还是有点懵，意思是diff在做新旧比对的时候，先比对的是节点的类型吗？作者回复: 你所谓的树形结构的移动之所以高是在查找上，但虚拟dom只做同级比对，移动也只存在同级移动，所以并不高，第二点，的确是先对比的类型
1
2019-07-09当使用v-for时，由于后台返回的数据有时候没有唯一的主键，请问是否可以使用数据中的某个属性+index作为:key的值？谢谢！作者回复: 并不可以， key需要的是一个静态唯一值 如果没有静态唯一值，可以自己生成
1 1
2019-12-02同级节点没有相同类型的？是指同层不能出现相同的html标签吗？- 2019-08-22老师，有个问题dialog里加载谷歌地图，谷歌地图对象已经初始化成功了就是不显示
作者回复: 脑补不出来你的问题 😓
2019-06-28看README.md之后可以跑起来了，但是还是非常疑惑本节的样例都做了什么演示？有key和无key的区别是什么？什么情况下更新插入？什么情况下更新新建？什么情况下删除新建？各自的使用场景是什么？作者回复: 建议查看下输出日志实际体会下，使用场景就是只要节点是动态的(有时有，有时无，有时顺序会变)，这种情况下都要用key 反之可以不用
2019-06-01老师讲的很透彻，原来是这么玩的。作者回复: 还有很多好玩的 😄 感谢支持
2019-05-29场景一是否也分有key和无key的状况，有key的情况下，就只是单纯的移动。无key的情况下B被更新成C ,C被更新成D,D被更新成B.是否可以这样理解？ 所以可以理解为key在虚拟DOM和真实的DOM进行同层比较中起着关键性的作用。作者回复: 对 仅限于同层比较
2019-05-09vue这种间接操作Dom原理，性能方面比jquery的直接操作Dom性能更差一些？作者回复: 对，的确要差一些，最终都是要操作dom的，当然也分场景，但是框架是在性能和开发效率之间找到一个平衡点
- 2019-04-25请问老师vue开发网站，浏览器兼容性这块是不是有所限制？
作者回复: 仅支持ie9及以上
- 2019-03-29老师，讲这些场景的意义在哪里🧐
作者回复: 理解vue的更新机制，提升组件的渲染性能，尤其是key的作用，除了性能，还有避免因为key的不稳定导致的bug
2019-03-26如果key使用index, 多重循环时, 使用两个循环的index的组合作为key可以吗?比如:
<li v-for="(item, index) in list" :key="index">
<div v-for="(child, cIndex) in item.child" :key="index + '-' + cIndex"></div>
</li>作者回复: 如果说就是你给出的div li而言，用index作为key,并不会引入bug。但如果是自定义组件，就不要这么用了。还有你这个两层key没有任何意义，虚拟dom只会同层比对
2019-03-21index只能做为一个key的一个备选，毕竟顺序并不能唯一确定一个值。
至于bug，想到的就是，比如删除数组的一个元素，始终是删除最后一项？作者回复: 对，不止删除，添加、排序，都会出现不符合预期的情况，主要是子组件有自己的状态的时候
2019-03-19当index作为key时，要删除数组某个元素时，删除的元素后面一个元素的index会变成刚删除的那个元素的index，出现删除多个元素的bug作者回复: 删除多个倒不会，只是真正被删除的那个却不是我们想要删除的那个 对于普通元素倒还好，因为都是纯显示的，但如果是自定义组件，而组件内还维护着自己的状态，那么状态就乱了
2019-03-191.首先考虑是否需要key？官方文档指出，当没有key时，会默认“就地复用”，如果只是数据项的顺序改变，vue不会移动DOM元素来匹配数据项的顺序，而是简单复用此处每个元素。当然这种情况只适用于简单的下来列表，而工作中恰恰都是简单的循环输出，所以说使用了key，大部分情况会绕开“就地复用”策略。
2.如果要使用，是否可以用index？不能，如果页面中有多个数据项循环，index便不能唯一。作者回复: 1. 简单列表不用key没问题，但“就地复用”并不是最高效的模式，而且有一定限制（只适用于不依赖子组件状态或临时 DOM 状态的列表渲染输出），所以推荐能用key的还是用key，但如果真的没有key，可以不用
2. 这是一方面，但即便没有多个数据项循环，依然也是有问题的 如前面提到的，依赖子组件状态的情况下，如果用了index作为key，会发生什么