新手对vue中特殊的标签属性ref和key的理解

ref属性

定义：用来给元素或子组件注册引用信息
理解：类似id（原生js中id的替代者），给元素或者组件打标识

作用

1、应用在html标签上，是用来获取真实的DOM元素（相当于原生的document.getElementById("xxx")）

2、应用在组件标签上，得到的是组件的实例对象

使用方式

第一步：打标识

<h1 ref="xxx">...</h1>
<School ref="xxx"></School>

第二步：获取

this.$refs.xxx

ref属性与原生的id属性的区别

1、添加在html标签上

两者结果相同，都是得到真实的DOM元素

2、添加到组件上

ref属性获取的是组件实例对象
id属性相当于给组件最外层容器添加了id属性，得到的是最外层包裹着的所有真实DOM元素

key属性

理解：给虚拟DOM对象添加标识，相当于给每个元素添加一个独一无二的id身份
作用：当数据发生变化时，Vue会根据新数据生成新的虚拟DOM，随后Vue进行新旧虚拟DOM的差异对比，比较规则如下：

对比规则

1、旧虚拟DOM中找到与新虚拟DOM相同的key

① 若虚拟DOM中的内容没有变化，那么直接使用之前的真实DOM
② 若虚拟DOM中的内容变化了，则生成新的真实DOM，随后替换掉页面之前的DOM

2、新虚拟DOM中未找到与旧虚拟DOM相同的key

创建真实的DOM，随后渲染到页面

用index作为key可能引发的问题

1、若对数据进行：逆序添加和删除等破坏数据顺序的操作

会产生没有必须的真实DOM更新，页面效果没问题，但效率低

2、若结构中包含输入类的DOM

会产生错误的DOM更新，页面出现问题

开发中如何选择key

① 如果数据有唯一标识，比如id，身份证号，学号等，可以直接使用数据的唯一标识
② 如果不存在逆序等破坏顺序的操作，仅用于渲染展示，那么使用index作为key值没有问题