Vue学习总结3

列表渲染

v-for指令:

1. 用于展示列表数据
2. 语法:v-for="(item, index) in xxx" :key=“yyy”
3. 可遍历:数组 对象 字符串(用得很少) 指定次数(用的很少)

key的原理

1. 虚拟DOM中key的作用:

   key时虚拟DOM对象的标识,但数据发生变化时,Vue会根据【新数据】生成【新的虚拟DOM】
   随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较
   

2. 对比规则：

   （1）旧虚拟DOM中找到了与新虚拟DOM相同的key
   		 
   	 - 若虚拟DOM中内容没变，直接使用之前的真是DOM
   	 - 若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM
   
   （2）旧虚拟DOM中未找到与新DOM相同的key，创建新的真实DOM，随后渲染到页面
   

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

   （1）若对数据进行 逆序添加、逆序删除等破坏顺序操作会产生没有必要的真实DOM更新-->界面效果没问题，但效率低
   （2）如果结构中还包含输入类的DOM，会产生错误DOM更新-->界面有问题
   

4. 开发中如何选择key：
   （1）最好使用每条数据的唯一标识作为key，比如id
   （2）如果不存在对数据的逆序添加 逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的

Vue监视数据的原理

1. vue会监视data中所有层次的数据。
2. 监测对象中的数据
   通过setter实现监视，且要在new Vue时就传入要监测的数据
   （1）对象中后追加的属性，Vue默认不做响应式处理
   （2）如需给后添加的属性做响应式，使用 Vue.set(target, propertyName/index, value)或 vm.$set(target, propertyName/index,value)
3. 监测数组中的数据
   通过包裹数组更新元素的方法实现，本质上做了两件事
   （1）调用原生对应的方法对数组进行更新
   （2）重新解析模板，进而更新页面
4. 在Vue修改数组中某个元素一定要用如下方法
   （1）使用这些API：push()、 pop()、 shift()、 unshift()、splice()、sort reverse
   （2）Vue.set()、 vm.$set()

特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象添加属性