一文带你详细了解Vue中的v-for

v-for

作用： 列表渲染，所在标签结构，按照数据数量，循环生成。指令写在谁身上，就循环创建谁

1.语法：

v-for = "(值变量，索引变量) in 目标结构" ：key = 索引变量

v-for = "值变量 in 目标结构 ：key = 索引变量"

目标结构：可以是数组，对象，字符串

2.数组方法如果修改了原数据就会更新 页面，如果没有修改，则不会，但可以重新赋值给变量让你页面更新

3.v-for中的key作用：在更新的时候：

• 有key，按照key比较，key设置为index：等于没设，就地复用
• 无key，就地更新

4.v-for中key

唯一不重复的字符串或者数值，数组中的id

key在使用过程中，有id用id，无id用索引

5.key的好处

可以提高更新的性能

v-set

作用：因为vue是数据驱动页面的，所以修改原数组中可以使用this.arr[0]='测试'但是，由于官方vue2特有的bug，导致这样修改原数组失效，虽然数组确实改变了，但是页面直接没更新，如果需要这样修改数据，就需要$set方法来修改

方法：

this.$set(修改数组，索引，‘修改的内容')

重绘和回流

• 重绘：元素的颜色/透明度发生变化
• 回流：元素的几何信息（宽度/位置）发生变化
• 回流是把结构重新画出来，重绘给你上色
• 回流一定触发重绘，但重绘不一定会引起回流

虚拟DOM

含义：本质上是一个js对象，保存DOM关键信息

好处：提高DOM更新的性能，不频繁操作真实的DOM，在内存中找到变化部分，再更新真实DOM相应属性或内容（打补丁）

computed计算属性

语法:定义在computed中和data（）{}并齐

事例：

   computed:{
       totalPrice(){//计算属性名
         set(val){ //在计算机属性被修改时执行
             //val是计算属性赋的值
         }
         get(){  //get在计算机属性被调用（访问）时执行
         //必须return一个结果
         }
         return this.count*this*this.price//返回运算结果
       }
     }

缓存：计算属性，基于依赖项的值进行缓存，依赖的变量不变，都直接从缓存取结果（带缓存）

总结

到此这篇关于Vue中v-for的文章就介绍到这了,更多相关Vue的v-for内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！