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

v-for

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

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

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

1. 方法：

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

重绘和回流

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

虚拟DOM

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

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

computed计算属性

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

1. 事例：

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

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