vue学习记录-07 循环遍历

vue学习记录-07 循环遍历

这篇文章是根据codewhy老师在b站的视频进行的学习记录

---

---

一、v-for遍历数组

在前面的学习记录所尝试的一些小案例中，v-for几乎每次都会出现，现在我们就来讲讲这个指令是怎么用的。

1、数组的遍历

v-for可以用于遍历数组，获取数组每一项的值并进行渲染，代码如下：

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

    const app = new Vue({
      el: '#app',
      data: {
        names:['why','koke','james','curry']
      },
    })

2、获取数组的索引值

如果我们还需要获得需要遍历的数组的索引值，那么我们可以这样写：

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

二、v-for遍历对象

v-for也可以用于遍历对象，对此我们分为三种情况来讲。

1、只获取一个值

在遍历对象的过程中，如果只是获取一个值，那么获取到的是对象的value值

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

    const app = new Vue({
      el: '#app',
      data: {
        info:{
          name:'why',
          age:18,
          height:1.88
        }
      },
    })

2、想要同时获取对象的key和value

如果想要同时获取key和value,按照格式(value,key)来写就可以了。
当然，就算你写成(key,value)，第一个参数提供的依然是value，第二个参数同样提供的还是key。

    <ul>
      <li v-for="(value,key) in info">{{value}} {{key}}</li>
    </ul>

3、除了键值，还需要索引值

提供索引值的参数是第三个，格式为(value,key,index)。

    <ul>
      <li v-for="(value,key,index) in info">{{value}} {{key}} {{index}}</li>
    </ul>

三、v-for使用过程添加key

与v-for对应的有一个key属性，它有什么用处呢？
先来看看代码是怎么写的：

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

    const app = new Vue({
      el: '#app',
      data: {
        letters:['A','B','C','D','E']
      },
    })

一句话总结：key的主要作用是为了更高效的更新虚拟DOM
如果在v-for的节点中，没有绑定:key值,那么再往中间插入元素时，后面的元素就会依次往后排进行更新，性能很差。

而如果给每个v-for节点加上了:key值，那么VUE就能够使用diff算法正确的识别每个元素。
这个时候在插入时会先看有key的元素是否有变化，因此就可以对老的元素进行复用，然后VUE再找到正确的位置将新元素插入其中。
如果不能够理解，那么也可以将它暂时理解为链式结构的插入原理。

因此，:key不能使用index，因为一旦发生变化，index也会变化，就不能做到性能优化，所以需要保证绑定的:key是具有唯一性的。

四、哪些数组的方法是响应式的

响应式是VUE最重要的一个特性之一，现在我有一个数组需要进行v-for循环操作，让我们来看看对数组的操作中哪些是具有响应式的呢？

  <div id='app'>
    <ul>
      <li v-for="item in letters" :key="item">{{item}}</li>
    </ul>
    <button @click="btnClick">按钮</button>
  </div>

const app = new Vue({
      el: '#app',
      data: {
        letters:['A','B','C','D','E']
      },
      methods:{
        btnClick(){
			...
        }
      }
    })

1、push方法：

用法：在最后添加任意个元素，具有响应式。

	this.letters.push('aaa');

注意：此时绑定用item绑定key会出现key重复的问题，多次push的key都是aaa

2、通过索引值修改数组中的元素

	this.letters[0]='这个数变了';

使用索引值修改数据并没有做到响应式变化，但是我们可以使用splice()解决，splice的使用见第六条。
或者使用Vue提供的set(要修改的对象，索引值，修改后的值)方法。

	Vue.set(this.letters,0,'这个数变了')

3、pop()方法

用法：删除最后元素，具有响应式。

	this.letters.pop();

4、shift()方法

用法：删除第一个元素，具有响应式。

	this.letters.shift();

5、unshift()方法

用法：在最前面添加任意个元素，具有响应式。

	this.letters.unshift('aaa');

6、splice()方法

用法：删除元素/插入元素/替换元素，具有响应式

（一）删除元素：第一个参数表示从第几个开始，第二个参数传入要删除几个元素，不传就删除后面所有元素
（二）插入元素：第一个参数表示从第几个开始，第二个元素为零，后面参数都是需要插入的元素
（三）替换元素：第一个参数表示从第几个开始，第二个参数传入要替换几个元素，后面参数都是需要替换的元素

this.letters.splice()

7、sort()方法

用法：排序数组，具有响应式。

	this.letters.sort()

8、reverse()方法

用法：反转数组，具有响应式。

	this.letters.reverse()

总结：除了直接通过索引值操作数据以外，其他的数组操作方式都具有响应式。