Vue3--vue列表渲染v-for

vue列表渲染v-for

基础使用

v-for的基本格式是 “item in 数组”：
数组通常是来自data或者prop，也可以是其他方式；
item是我们给每项元素起的一个别名，这个别名可以自定来定义；

如果我们需要索引，可以使用格式： “(item, index) in 数组”；
注意上面的顺序：数组元素项item是在前面的，索引项index是在后面的；

一个参数： “value in object”;
二个参数： “(value, key) in object”;
三个参数： “(value, key, index) in object”;

v-for也可以遍历其他可迭代对象(Iterable)

v-for同时也支持数字的遍历：
每一个item都是一个数字 从1开始

<ul>
   <li v-for="item in 10">{{item}}</li>
</ul>

遍历数组

<ul>
   <li v-for="(movie,index) in movies">{{index + 1}}-{{movie}}</li>
</ul>

遍历数组复杂数据

<div class="item" v-for="item in products">
    <h3 class="title">{{item.name}}</h3>
    <span>价格：{{item.price}}</span>
    <p>秒杀:{{item.desc}}</p>
</div>

基础代码

	  data() {
          return {
            movies: ["星际穿越", "大话西游", "哆啦A梦"],
            products: [
              { id: 110, name: "Macbook", price: 9.9, desc: "9.9秒杀" },
              { id: 111, name: "iPhone", price: 9.9, desc: "9.9秒杀" },
              { id: 112, name: "小米电脑", price: 9.9, desc: "9.9秒杀" },
            ],
          };
        },

template

类似于v-if，你可以使用 template 元素来循环渲染一段包含多个元素的内容：
我们使用template来对多个元素进行包裹，而不是使用div来完成；

	  <template v-for="(value,key,index) in infos">
        <span>{{value}}</span>
        <strong>{{key}}</strong>
        <i>{{index}}</i>
      </template>

基础代码

	   data() {
          return {
            infos: { name: "james", age: 18, height: 1.88 },
          };
        },

数组更新检测

Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新
这些被包裹过的方法包括：
push()
pop()
shift()
unshift()
splice()
sort()
reverse()

替换数组的方法
上面的方法会直接修改原来的数组；
但是某些方法不会替换原来的数组，而是会生成新的数组，比如 filter()、concat() 和 slice()；

在methods中使用这些方法改变data中的数据触发视图更新

key

在使用v-for进行列表渲染时，我们通常会给元素或者组件绑定一个key属性
key尽量使用唯一值 有id最好。

<ul>
   	<li v-for="item in letters" :key="item">{{item}}</li>
</ul>

这个key属性有什么作用呢？我们先来看一下官方的解释：
key属性主要用在Vue的虚拟DOM算法，在新旧nodes对比时辨识VNodes；
如果不使用key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法；
而使用key时，它会基于key的变化重新排列元素顺序，并且会移除/销毁key不存在的元素；

VNode的全称是Virtual Node，也就是虚拟节点；
事实上，无论是组件还是元素，它们最终在Vue中表示出来的都是一个个VNode；
VNode的本质是一个JavaScript的对象；

Vue在进行diff算法的时候，会尽量利用我们的key来进行优化操作：
在没有key的时候我们的效率是非常低效的；
在进行插入或者重置顺序的时候，保持相同的key可以让diff算法更加的高效；