vue学习笔记（2）

一. 关于key

1. key的作用及原理

        key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】，随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：

（1）旧虚拟DOM中找到了与新虚拟DOM相同的key：若虚拟DOM中内容没变，直接使用之前的真实DOM；若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM。

（2）旧虚拟DOM中未找到与新虚拟DOM相同的key：创建新的真实DOM，随后渲染到页面。

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

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

                                        会产生没有必要的真实DOM更新 ==>    界面效果没问题，但效率低    

（2）如果结构中还包含输入类的DOM：

                                        会产生错误的DOM更新  ==>   界面有问题

3. 开发中如何选择key？

（1）最好使用每条数据的唯一标识作为key，比如id、手机号、身份证号、学号等唯一值。

（2）如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表展示，使用index作为key是没有问题的。

二、Vue监视数据的原理

1. 基于Object.defineProperty()，Vue会监视data中所有层次的数据

2. 对象的监测：在vue实例生成时就会对传入的数据进行监视，实例里生成后往对象中追加的属性，Vue不会对其做监视，如需后追加的属性需要实现响应式，则需要使用Vue.set(object, propertyName, value)或this.$set(object, propertyName, value)来实现。

3.数组的监测： 利用索引改变数组某项（如：this.arr[3] = newValue）或者修改数组的长度时（this.arr.length = newLe