八、vue-基础之列表渲染v-for、v-for中的key属性的作用

一、v-for列表渲染

在真实开发中，我们往往会从服务器拿到一组数据，并且需要对其进行渲染。

这个时候我们可以使用v-for来完成；
v-for类似于JavaScript的for循环，可以用于遍历一组数据；

二、v-for基本使用

（1）遍历数组

我们直接上demo~

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <!-- 1. 遍历数组 -->

      <!-- 2. 遍历对象 -->
      <ul>
        <!-- 2.1 一个参数 -->
        <li v-for="value in info">{{value}}</li>
      </ul>

      <ul>
        <!-- 2.2 两个参数 -->
        <li v-for="(value, key) in info">{{value}} - {{key}}</li>
      </ul>

      <ul>
        <!-- 2.3 三个参数 -->
        <li v-for="(value, key, index) in info">{{value}} - {{key}} - {{index}}</li>
      </ul>
    </div>
    <script src="../lib/vue.js"></script>

    <script>
      const app = Vue.createApp({
        // data: option api
        data() {
          return {
            message: "Hello Vue",
            movies: [],
            info: { name: "daxia", age: 18, height: 1.88 },
          }
        },
      })

      app.mount("#app")
    </script>
  </body>
</html>

（2）遍历对象

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <!-- 1. 遍历数组 -->

      <!-- 2. 遍历对象 -->
      <ul>
        <!-- 2.1 一个参数 -->
        <li v-for="value in info">{{value}}</li>
      </ul>

      <ul>
        <!-- 2.2 两个参数 -->
        <li v-for="(value, key) in info">{{value}} - {{key}}</li>
      </ul>

      <ul>
        <!-- 2.3 三个参数 -->
        <li v-for="(value, key, index) in info">{{value}} - {{key}} - {{index}}</li>
      </ul>
    </div>
    <script src="../lib/vue.js"></script>

    <script>
      const app = Vue.createApp({
        // data: option api
        data() {
          return {
            message: "Hello Vue",
            movies: [],
            info: { name: "daxia", age: 18, height: 1.88 },
          }
        },
      })

      app.mount("#app")
    </script>
  </body>
</html>

（3）遍历字符串

（4）遍历数字

三、数组更新检测

我们上代码~

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <ul>
        <li v-for="item in names">{{ item }}</li>
      </ul>
      <button @click="changeArray">修改数组</button>
    </div>
    <script src="../lib/vue.js"></script>

    <script>
      const app = Vue.createApp({
        // data: option api
        data() {
          return {
            names: ["abc", "cba", "nba", "aaa", "ccc"],
          }
        },
        methods: {
          changeArray() {
            // 1. 直接将数组修改为一个新的数组
            // this.names = ["why", "kobe"]

            // 2. 通过一些数组的方法，修改数组中的元素
            // this.names.push("why")
            // this.names.pop()

            // 索引，删除元素的个数（添加的话就是写0），
            // this.names.splice(2, 1, "why")

            // 排序
            // this.names.sort()

            // 反转
            this.names.reverse()
          },
        },
      })

      app.mount("#app")
    </script>
  </body>
</html>

注意：不修改原数组的方法是不能侦听（watch）

// 3. 不修改原数组的方法是不能侦听（watch）
const newNames = this.names.map((item) => item + "why")
this.names = newNames

四、v-for的key属性

（1）认识VNode

我们先来解释一下VNode的概念：

因为目前我们还没有比较完整的学习组件的概念，所以目前我们先理解HTML元素创建出来的VNode。
VNode的全称是Virtual Node，也就是虚拟节点；
事实上，无论是组件还是元素，它们最终在Vue中表示出来的都是一个个VNode；
VNode的本质是一个JavaScript的对象；

我们先来理解一下，现在id=app的div元素，是不是相当于模板，以前我们是写在下面的，现在写在了上面。

vue并不会根据你写的h2，直接去给你创建一个h2元素。如果直接给你#app.append(h2元素)，追加了h2元素的话，那此时不就是真实DOM的h2元素。

他会在生成真实DOM的h2元素之前，先生成一个VNode。

那VNode到底是一个什么东西呢？

答：VNode的本质是一个JavaScript的对象。他直接用一个JavaScript对象把他表现出来了，并没有直接给你表现出一个h2元素。

假如说你的模板里面有个div元素，他会先把你这个div元素先做一个解析（源码里其实有专门的一部分代码来解析下面这个div元素的，解析成VNode），解析成啥样子的？就是下方的图。本质上就是一个java Script对象。

我们有了VNode，有直接转化成我们真实DOM里面的元素吗？答：目前还没有。

当我们有了VNode之后，我们就可以对这个Vnode进行解析了。原来我们创建的元素是div元素，原来我们创建的元素的属性是...等等。最终的话再由我们的VNode转换成真实DOM里面的元素，转换成真实DOM里面的元素之后，我们才能在这是DOM里面看到该元素，在用户界面才能看到。（先做一个了解，后面看源码）。