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

作者: web 发布时间: 2023-02-04 浏览: 566 次 编辑

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计算属性

语法:定义在computed中和data(){}并齐

事例:

computed:{
       totalPrice(){//计算属性名
         set(val){ //在计算机属性被修改时执行
             //val是计算属性赋的值
         }
         get(){  //get在计算机属性被调用(访问)时执行
         //必须return一个结果
         }
         return this.count*this*this.price//返回运算结果
       }
     }
  1. 缓存:计算属性,基于依赖项的值进行缓存,依赖的变量不变,都直接从缓存取结果(带缓存)