下载APP
登录
关闭
讲堂
算法训练营
Python 进阶训练营
企业服务
极客商城
客户端下载
兑换中心
渠道合作
推荐作者
当前播放: 10 | 理解虚拟DOM及key属性的作用
00:00 / 00:00
标清
  • 标清
1.0x
  • 2.0x
  • 1.5x
  • 1.25x
  • 1.0x
  • 0.5x
网页全屏
全屏
00:00
付费课程,可试看

Vue开发实战

共53讲 · 53课时,约500分钟
10501
免费
01 | 课程介绍
免费
02 | Vue简介
免费
03 | 内容综述
免费
04 | 第一个Vue程序
免费
05 | 组件基础及组件注册
免费
06 | Vue组件的核心概念:事件
免费
07 | Vue组件的核心概:插槽
08 | 理解单文件组件
09 | 双向绑定和单向数据流不冲...
10 | 理解虚拟DOM及key属性的...
11 | 如何触发组件的更新
12 | 合理应用计算属性和侦听器
13 | 生命周期的应用场景和函数...
14 | 指令的本质是什么
15 | 常用高级特性provide/inj...
16 | 如何优雅地获取跨层级组件...
17 | template和JSX的对比以及...
18 | 为什么需要Vuex
19 | 如何在Vue中使用Vuex
20 | Vuex核心概念及底层原理
21 | Vuex最佳实践
22 | Vue Router的使用场景
23 | 选择何种模式的路由及底层...
24 | Nuxt解决了哪些问题?
25 | Nuxt核心原理是什么?
26 | UI组件库对比:Element U...
27 | 提升开发效率和体验的常用...
28 | 单元测试的重要性及其使用
29 | 生态篇习题解答(上)
30 | 生态篇习题解答(下)
31 | Ant Design Pro介绍
32 | 使用Vue CLI 3快速创建...
33 | 如何自定义Webpack和Babel...
34 | 如何设计一个高扩展性的路...
35 | 实现一个可动态改变的页面...
36 | 如何将菜单和路由结合
37 | 如何使用路由管理用户权限
38 | 更加精细化的权限设计(权...
39 | 如何在组件中使用ECharts...
40 | 如何高效地使用Mock数据进...
41 | 如何与服务端进行交互(Ax...
42 | 创建一个普通表单
43 | 初始数据、自动校验、动态...
44 | 创建一个分步表单
45 | 自己封装一个支持自动校验...
46 | 如何管理系统中使用的图标
47 | 如何定制主题及动态切换主...
48 | 如何做好国际化
49 | 如何高效地构建打包发布
50 | 如何构建可交互的组件文档
51 | 如何做好组件的单元测试
52 | 如何发布组件到npm
53 | GitHub相关生态应用(持续...

精选留言(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-09
    vue这种间接操作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-21
    index只能做为一个key的一个备选,毕竟顺序并不能唯一确定一个值。


    至于bug,想到的就是,比如删除数组的一个元素,始终是删除最后一项?

    作者回复: 对,不止删除,添加、排序,都会出现不符合预期的情况,主要是子组件有自己的状态的时候

  • 2019-03-19
    当index作为key时,要删除数组某个元素时,删除的元素后面一个元素的index会变成刚删除的那个元素的index,出现删除多个元素的bug

    作者回复: 删除多个倒不会,只是真正被删除的那个却不是我们想要删除的那个 对于普通元素倒还好,因为都是纯显示的,但如果是自定义组件,而组件内还维护着自己的状态,那么状态就乱了

  • 2019-03-19
    1.首先考虑是否需要key?官方文档指出,当没有key时,会默认“就地复用”,如果只是数据项的顺序改变,vue不会移动DOM元素来匹配数据项的顺序,而是简单复用此处每个元素。当然这种情况只适用于简单的下来列表,而工作中恰恰都是简单的循环输出,所以说使用了key,大部分情况会绕开“就地复用”策略。
    2.如果要使用,是否可以用index?不能,如果页面中有多个数据项循环,index便不能唯一。

    作者回复: 1. 简单列表不用key没问题,但“就地复用”并不是最高效的模式,而且有一定限制(只适用于不依赖子组件状态或临时 DOM 状态的列表渲染输出),所以推荐能用key的还是用key,但如果真的没有key,可以不用
    2. 这是一方面,但即便没有多个数据项循环,依然也是有问题的 如前面提到的,依赖子组件状态的情况下,如果用了index作为key,会发生什么