Vue中v-for如何巧妙改写为长尾？

本文共计1009个文字，预计阅读时间需要5分钟。

目录- v-for 与 v-set 的重绘和回流- 虚拟DOM- computed 计算属性- 总结：v-for 的作用

内容：v-for 与 v-set 的重绘和回流：在 Vue 中，使用 v-for 指令进行列表渲染时，如果数据发生变化，Vue 会通过 v-set 方法来更新视图，这涉及到 DOM 的重绘和回流。

虚拟DOM：Vue 使用虚拟 DOM 来优化性能，通过对比虚拟 DOM 和真实 DOM 的差异，只更新变化的部分，从而提高渲染效率。

computed 计算属性：computed 属性允许我们声明式地定义一个属性，当依赖的数据发生变化时，computed 属性会自动重新计算。

总结：v-for 的作用：- 列表渲染：使用 v-for 指令可以循环渲染列表中的每个元素。- 标签结构：根据数据数量动态生成相应的标签结构。- 数据绑定：根据数据的变化动态更新视图。

指令写法：v-for=item in items

目录

• v-for
• v-set
• 重绘和回流
• 虚拟DOM
• computed计算属性
• 总结

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内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联！