一、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 apidata() {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 apidata() {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 apidata() {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里面看到该元素，在用户界面才能看到。（先做一个了解，后面看源码）。