一文带你详细了解Vue中的v-for_vue.js

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//返回运算结果
       }
     }

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

总结