带你详细了解Vue中的v-for
## v-for0.作用: 列表渲染,所在标签结构,按照数据数量,循环生成。指令写在谁身上,就循环创建谁0.语法:`v-for = "(值变量,索引变量) in 目标结构" :key = 索引变量``v-for = "值变量 in 目标结构 :key = 索引变量"`目标结构:可以是数组,对象,字符串0.数组方法如果修改了原数据就会更新 页面,如果没有修改,则不会,但可以重新赋值给变量让你页面更新
v-for
-
作用: 列表渲染,所在标签结构,按照数据数量,循环生成。指令写在谁身上,就循环创建谁
-
语法:
v-for = "(值变量,索引变量) in 目标结构" :key = 索引变量
v-for = "值变量 in 目标结构 :key = 索引变量"
目标结构:可以是数组,对象,字符串
-
数组方法如果修改了原数据就会更新 页面,如果没有修改,则不会,但可以重新赋值给变量让你页面更新
-
v-for中的key作用:在更新的时候:
- 有key,按照key比较,key设置为index:等于没设,就地复用
- 无key,就地更新
-
v-for中key
唯一不重复的字符串或者数值,数组中的id
key在使用过程中,有id用id,无id用索引
-
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//返回运算结果
-
缓存 :计算属性,基于依赖项的值进行缓存,依赖的变量不变,都
直接从缓存取结果
(带缓存)