使用场景： （1）我们把数组/对象的内容显示到 div 标签中，可以使用 v-for 指令。 （2）当我们尝试改变列表里的数据，怎么改变？我们可以使用 v-on + 绑定点击事件，比如点击新增button按钮，触发handleAddBtnClick方法，执行里面的逻辑， （3）改变数据它就会重新的对页面做渲染，为了优化性能，复用dom元素？如何复用？使用v-for的时候，保证key值是唯一的。这样vue就知道对应的 dom元素该不该复用了。 （4）关于列表的常用的变更方法， 比如新增push，顺序是自上而下的，比如unshift新增是也是自上而下的 比如pop删除，是自下而上的， 比如shift删除是自上而下的，像这些常用的变更方法用的时候查一下即可。 |
|
课程内容：
20220814 - 今日学习的内容包括：
第2章 Vue.js基础语法、生命周期与事件
2-11 列表循环渲染
代码：
解读：
今天我们来学习 列表渲染相关的一些内容，
我们首先来定义一个数组内容，叫做list。里面会有一些内容，比如说dell lee teacher。
那么我如果想把这个数组里的内容循环的展示出来，该怎么做呢？
我们可以使用v-for指令，我们可以把这些内容显示在一个div 标签里面，怎么去用 v-for指令?
我们这么去写，
它的意思是什么？它的意思是我现在用v-for这个指令，要对list这个数据做循环，
循环到第一项的时候，
第一项的内容会放到item里面去，然后我就可以用 item把它展示出来了。
接着它进行第二轮的循环，循环内容 lee 又被放到item里面去了，所以ta又把item打印了一遍，也就是打印出了lee，
继续循环。teacher第三项又放到了item里面来，所以打印出了teacher这个内容。
通过这样的一个循环，我们就可以把dell lee teacher 打出来，我们到页面上刷一下，看一下效果，没有任何的问题：
在做循环的时候，我们除了可以去获取循环中的每一项之外，还可以去在这里用第二个参数叫做index，它指的是什么？
它指的是你当前循环的下标，或者说你循环是第几次，把index也打印出来。
那么dell 循环第一次的时候，大家看 list 里面对应的内容应该是dell，dell这个元素是第一次，但是这个下标是从0开始的，
所以它应该展示出dell – 0，
第二次循环就变成lee–1，
第三次就变成teacher–2了，
大家就知道了，我们在vue里面去做一些数据循环的时候，就可以用v-for指令了。
现在我们这个内容它循环的是一个普通的数组，假设我想循环一个对象怎么办？
我先把上面的数据叫做listArray，所以大家再去写的时候可以把它写成listArray。
接着我要写一个listObject。我们这样来写一个对象里面有以下属性：
然后我想对这个对象做循环可不可以？也可以。
这个时候我把listObject放到v-for里面来，那么我依然可以写item，这个item其实它的第一个参数指的是什么？
指的是以循环这个列表的时候，比如说 first name先循环，循环第一项的时候， Item指的是它的 value值，
所以一般来说我们用item也可以，但一般我更倾向于在做这个对象循环的时候，把它叫做一个value。
它的第一个参数就是后面的 value。第二个参数是什么？是它的key，它的key指的就是前面 比如firstName。
在我们去循环一个对象的时候，它其实不仅仅只有两个参数，它还有第三个参数。第三个参数是什么？就是下标了。
我们可以把 index再打印一下，
所以你可以看到哈，当我们去给对象做一些循环的时候，那么我们的 v-for指令的编写会有一些变化，
它的第一个参数表示value，第二个参数表示key，第三个参数表示这个index，
当然这个key我指的是下标的意思，
那么接下来再给大家讲解一些内容。大家来看这里展示出列表中的一项一项的内容，
其实当我们去改变数据的时候，比如说我现在尝试改变列表里的数据，我怎么改变？
我在这里加一个button，新增，然后绑定一个click事件，等于handleAddBtnClick，
然后在templates上方写methods，里面我们加一个handleAddBtnClick方法，它能干嘛呢？
它就是像this点listObject里面或者我们用 listArray 也行，我们怎么加？
往对象里直接加属性其实是不生效的，我们现在用listArray 做一个演示，
首先应该是一个第一项也是对应的 value对吧？或者叫item。
第二项是index，我直接打印item和index就可以，
每次点击的时候我向listArray 里面去push内容，比如说我 push一个hello，保存一下，我们来看回到页面上刷新，点击新增按钮它就会多出一个hello：
我改变数据它就会重新的对页面做渲染，重新的对页面做渲染的时候，如果我们把 dell lee teacher全部重新的渲染了，
是不是它其实比较损耗性能，比如说其实我增加了一个内容，上面已经有的内容它就保留就行了，只渲染下面这个就可以了。
如果它全部的重新渲染，其实是浪费了额外的性能的，vue 的底层为了去优化性能，它会尽量的发现以前我们的 dom元素可以复用的话，我就尽量的让它能够复用，
但是有的情况下 vue 不知道一些东西到底该复用还是不该复用。这个时候为了让 vue 的效率更高，性能更高，
一般我们建议大家在做v-for指令使用的时候，给循环的每一项增加一个key值，我们这里写一个key等于比如说我们叫index，但一般不建议用index做key值，我们可以用item做key值。
key值尽量是唯一的，因为只有唯一才能够对每个渲染的dom元素做一个区分，让vue 知道对应的dom元素该不该复用，能不能复用，
是 key 值尽量的用唯一的东西。
现在我们 index实际上每次循环它的index都不同，所以我们现在也就先用一下index做一个key值，
有了key值之后列表渲染的时候，比如说我刷新一下，ta会报一个错，是不是？这块我写错了，应该是两个引号:
保存。
回过来我们刷新页面， dell现在的key值是0，lee key值是1，teacher key值是2，
我新增hello的话，它的k值是3，
在新增hello 进行第二次渲染的时候，dell的key值是不是还是0？
vue的底层发现 如果这个元素它两次的key值基本上是一样的，那么ta就看一下之前key值对应的dom元素能不能在这次渲染的时候被复用，如果能复用的话就不用创建这个dom元素了，在底层能够提升一些性能。
要记住一个核心的点，就是当你去使用vue做循环的时候，循环的每一项尽量的或者说一定都要给一个唯一的key值，这会有效的提升vue的性能。
如果我们循环的是一个数组，我们想去往这个数组里加东西，让列表的内容变多的话，我们可以怎么去写？
我们可以用两种方法，第一种方法叫做变更函数，使用数组的变更函数，那么数组的变更函数有哪些？
第一个我们刚才使用了 push 对不对？ push 是一个变更函数，其实还有很多其他的变更函数。
我们来看一下，比如说把它注释掉，我们还可以用数组的pop，我们看一下pop这个函数，我们调用它会有一个什么样的效果？
我们刷新一下，点击你发现pop是怎么样？
我们看一下，第一次点击新增，它把最前面还是最后面的？是不是把后面的teacher就给ta干掉了，teacher没了，
第二次点击lee没了，
第三次点击dell没了，
所以每次会从数组里面减少一个，
那么pop这种变更函数去变更这个数组里的内容，也能实时的生效，去反映在页面的渲染上，对吧？
我们继续来看还有一些其他的，比如说shift变更函数，它是往开头增加内容：
保存一下，
然后再来点新增，
但是你会发现 shift是怎么回事， shift是从上往下去删掉这个数组里的内容，你看 pop是把teacher先去掉，而shift我点击的时候是把dell先去掉，
那么还有比如说unshift，和shift相反，unshift就是往这个数组里的内容添加内容，开头添加内容，我们可以这样去写，unshift，
当然shift这块就不用写参数了。见注释 29行。
我们看一下unshift它的一个效果，刷新页面，点击新增，它会往头部去添加hello这样的一个内容：
到这里 14天 打卡小目标就完成了。
为什么我会完成这个目标？
是奖杯驱动着我来记录学习的。
在这14天打卡过程中，即使我想半途而废，但是想想14天之后能拿到慕课周边活动的奖杯，这还是很有诱惑力的，很有纪念意义的。
那平时自己在业余时间学习，也可以整点有意义的奖励，比如看了好久但没有下单的人工学椅子，比如舒服的床垫，比如无线路由器等等，自己设计有意思的学习活动，自己给自己 安排小确幸。
最后但不是结束，vue 基础还没完成20节打卡，继续努力~
随时随地看视频
