vue的循环结构v-for

循环结构

v-for

用于循环的数组里面的值可以是对象，也可以是普通元素

<div id="app">        <h3>图书列表</h3>        <ul class="list">            <!-- v-for="(数组元素,数组索引) in 数据源" -->            <li v-for="(item,index) in booksList">                <h3 v-text="'索引值:'+index"></h3>                <h3 v-text="item.id"></h3>                <h4 v-text="item.bookname"></h4>                <p v-text="'￥'+item.price"></p>                <p>￥{{item.price}}</p>            </li>        </ul>    </div>    <script>        const app = new Vue({            el: "#app",            data: {                booksList: [{ "id": 10, "code": "000005", "bookname": "皮囊", "price": 20, "imghref": "JahwPRt7-A2HcrrBzAXGMLnv.jpg", "auth": "未知", "typeid": 10, "isshelf": 0 }, { "id": 11, "code": "000007", "bookname": "人间值得", "price": 30, "imghref": "9rHVMrXx20LGoFTtmWhBRk56.jpg", "auth": "未知", "typeid": 10, "isshelf": 0 }, { "id": 12, "code": "000008", "bookname": "人生海海", "price": 40, "imghref": "NkojLewT368d3CWiDoskqhez.jpg", "auth": "未知", "typeid": 10, "isshelf": 0 }]            },            methods: {            }        })    </script>

强烈不推荐同时给同一个元素使用 v-if 和 v-for,当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。

面试题:为什么v-for与v-if不能一起使用?

因为v-for的优先级比v-if的优先级高,所以每次渲染时都会先循环再进行条件判断,而又因为v-if会根据渲染条件为ture或false来决定渲染与否的,所以如果将v-if 和 v-for 用在一起会特别消耗性能

v-for的key值

一般将数据中的唯一的字段作为key值,这个key值并不会渲染到标签上

<ul>  <li v-for="item in items" :key="item.id">...</li></ul>

key值的作用：

​ \1. 提升v-for渲染的效率

​ \2. 提高渲染性能

若对数据进行：逆序添加、逆序删除等破坏顺序操作， 会产生没有必要的真实DOM更新，虽然界面效果没问题, 但效率低。

​ \3. 避免数据混乱的情况出现

​ 如果结构中还包含输入类的DOM： 会产生错误DOM更新 ，出现数据混乱。

面试题：v-for中的key值有什么作用？为什么不推荐使用索引作为key值

Vue更新使用v-for渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是简单复用

在"就地复用"策略中，输入框没有与数据绑定，所以vuejs默认使用已经渲染的dom，然而文本是与数据绑定的，所以文本被重新渲染。这种处理方式在vue中是默认的列表渲染策略，因为高效。

这个默认的模式是高效的，但是在更多的时候，并不需要这样去处理，所以，为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，需要为每项提供一个唯一key特性，Vue会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。