09_尚硅谷_Vue_列表渲染

那我们就继续往下看啊。我们看下面一个列表渲染啊，这个在项目中其实用的特别多，就显示一个列表的效果。这里面其实一共有两个啊，先看这个基本的。啊，一共会有两个测试，一个是去便利数组，再一个是便利对象，其实更多的是上面这个。我们先来看第一个啊，把这个打开啊，现在啥也没有是吧，好来先写一些基本的吧，把这个view给他行吗？溜出来写个E啊。井号是吧，好，接着写个对。啊，既然我们要去显示个列表，那我应该有一个什么类型的数据。

什么类型？数组吧，对吧，啊好了，那现在假设我要显示一个人的列表，那应该有一个什么化成是吧？好，那每一个呢，元素都是一个人对象吧，好。那假设呢，它有两个啊，一个是内啊，我就随便来一些。基本上就好，再来一个A级，嗯，18。可以吧，好，那下面呢，再来一些。嗯，搞一个四个差不多是吧，再换几个名字啊。在还有包裹，还有什么比较出名的？还有六十六十吧，完了啊好来啊，这一个呢是十十六啊，这个呢19。啊，这个时期。

这样是吧，好。搞定了，那下面呢，我们要以列表的形式呢，把这个数据给它显示出来。在这里是吧，那列表很自然，是不是用ii u和多I好，但是以前呢，我们可能自己写，直接写很多ii是吧，那现在不行了。因为我们现在要根据数据的个数是不是动态决定了，好，要想显示个列表啊，其实极其简单。来一个for指令，这个怎么写呢？看到啊，OK，先写出一个结构啊。好，来这里面看看，看大家懂不懂啊，写个字。就有点像一个for运循环啊这边啊，大家看到这边括号里面说我有两个变量，一个是P，一个什么呢？Index，这就是我每一次编译是不是都产生当前元素吧，这是当前元素的什么。

下标便利的是谁？或成？能看懂吗？嗯。好，而且。一旦有v for，最好是要给它加一个K的属性，其实这个大家应该能理解，跟RA差不多。里面在map里面是不是也需要有个K啊一样的好，这用什么呢？Index，但这样不对。因为你这么写，它就看成是index了。就是这是一个文本。而我，最终这个K应该是一个具体不同的词吧。也就是我要去把这个index从一个文本变成一个表达式。对，冒号。能看到吗？好，那下面是不是在里面把那个东西一个一个显示出来啊，啊比如说那个P点。

啊，还有P点什么呢，p.a级呗，是吧，哎，我想把这个下边也显示一下吧。下边显示怎么办？这些什么index？是这个吧，好，那现在也就是说我需要刷一下呗。是不是比那个什么什么速度迈克方法要要爽很多。对吧，而且不仅写代码的时候说你看应该也，你要是HTJS都会，你多少应该能看的差不多。啊，OK。好，这是这个，那我们最终的，我们最终需要的不仅要能显示出来，还有两个操作叫什么呢？删除和什么更新。来看一下啊。那我这边呢，再来嗯，几个按钮。

我们先来一个删除，同时还有一个什么更新是吧，好来删除一下应该怎么做。At connect等于好，那我是不是指定一个删除的回调函数，好，那我就叫delete p可以吧，啊，OK，好。来，那我这个ddt写哪了。是啊，固定的下面有问题啊，大家知道啊，我去调用点击它是不是删除当前的这一个。P啊，你想想看，现在有个问题，我删除谁序我知道吗？我不知道了，说白了就是我在这个person里面删除数组中的某一个元素，我找谁呢？我找哪个？

我要知道什么就好办，下标是吧，但现在我有下标吗？没有，但是在这个地方指定的时候是不是有index。怎么办？也就是说现在必须得是不是指定一个特别的参数，所以干嘛。能看到吧，那现在也就是说我给这个函数在定义的时候定一个什么index，那也就是说我们现在删除person中指定index的是不是P。有没有看到？那删呗。先我要找到这个他怎么找，非常的简单直接认识点。能不能看到啊，OK，按以前要怎么找this.state点什么是不是才能找到数据啊，现在不用。

好，接着了。删除。删除哪个元素，删几个个。能看懂吧？好，那下面我们来看一下我们的删除有没有效果。先删除这个啊，走你。这不挺好使的吗？对吧，啊很简单，下面这个更新稍微复杂点啊，我们来看一下更新。更新的话，按数来说，这里面应该是不是要指定一些新的数据啊。啊，这里面我就简化一下，大家看到我啊，At等于update p好了，首先你要知道被更新那个元素的什么。下标吧，那更新为哪个数据呢？按理来说应该有输入框输入的，这里面我就更新为一个固定的。

来个这个，来个name，好，我就写一个，还有什么名字比较。是吧，就来个看看吧。好，下面还有个A级是吧，呃，来个20。OK吧，OK好OK以后来下面我这边。应该怎么写？这是更新啊，我要穿什么下标以及什么。是牛批。有没有看到一个新的人嘛。没问题是吧？好，那现在我们要做的更新，实际上是将新的是不是把以前的给替换掉。那我就想到一个很简单的操作，This person是中括号index。等于什么？牛批吗？这个不懂啊，OK，好。

来下面呢，我们来去看一下，看一下它的啊，行不行。现在是有问题的。大家看着我啊，同时我还把这个打开。看一下工具。这不有view吗？那现在我是不是有数据的，而且是第一个啊，看第一个啊，Name等于Tom age等于18，接着我点一下更新。这边变了吗？没有。数据变了吗？哎，现在我的数据变了，但界面没有变吧。那也就是说啊，我们说过从数据变化，我们的界面就应该是不是自动发生变化，这个自动我们称它为什么。数据绑定。对吗？我们不有个概念叫数据绑定吗？我只要更新数据，我的界面，对应的界面就会发生变化。但现在有数据保证的效果吗？没有。

啊，没有这个效果。那这个地方就得说一个事情啊，说一个什么事呢，大家看着我啊，大家看着我，我先给大家演示另一个操作，我raise persons，我直接等一个。是个什么概念？也就是说，本来是不是显示四个元素列表啊，我这么一搞了。这个有变化吧，没有问题，因为我们的数据什么是不是发生了变化，能看懂吧，我们的这个数据发生了变化，看懂吧，好，这里面就说。啊，说一个什么事呢，说。我现在的这个操作是不是改变了。

对吧，改变了POS，而上面这个操作有没有改变po，哎，这个地方说啊，这个po是个变量，对吧，我上面这个操作并没有改变po本身。啊本身，而是改变了什么。是不是我那个变量所指向那个数组内部的结构，内部的数据，也就是说我这里有一个变量叫。是吧？它是不是指向一个数组，数组本身也是个对象了，是吧？OK，我们这一条语句是不是相当于给它重新赋值。他变坏了吧？这个数据绑定是有的。但是我们前面这个操作。改变他本质了吗？没有大家看到我吗？我这点它接着是不是找到数组中内部的一个对象。

改变它内部的结构。对吧。这种改变。他并不知道，也就是说什么个意思呢，本身啊，所以讲。啊六啊，本身只是监视了。监视了谁了？POS的改变。没有啊，监视。这个数组内部。的改变。但是啊，这个说法又跟他是矛盾的，说实话跟他是矛盾，你想想现在我的这个删除有改变本身吗。有没有？有还是没有，就是说这个变量本身的值，它这个引用变量，大家知道引用变量存的是例值，它本身有没有改。

这不知道吗？就是我这是个引用变量，你就这个变量里面存的这个数据有没有改。这难道不知道了？我的天，这是指向一个对象啊，譬如说我举个例子，挖一个obj等于一个对象啊，Obj p的说点点T等于一个一，你是obj变了吗？没有。O有没有变？没有OB哪变了呢？我是不是改变的是这一个，它指向的对象里面内部的结构，因为OB一直都指向这个对象啊，这个对象的位置是没有发生改变了。能懂吧，啊，这个能懂啊，那也就是说现在我去调用。这个方法是干嘛去？是不是删除对象内部的一个元素，我对象位置变了吗？没有，那我的这个本身变了没有？

明显没有嘛。能不懂，明显没有，那实际上就跟他的矛盾了嘛，你想想看，我们现在的这个操作，根本就没有去改变person是本身，对不对。只是删除了它指向那个数组里面某一个元素内部的一个元素。但现在界面变化没有。变了是不是，那也就是说是不是有数据管理啊，这个它是如何实现的，这个得看一下文档。啊，得看一个文档。啊，它这里面有说明的，我们要找到那个那个教程。啊，教程里面有去说这样一个事情，我们找到他啊来这里面有一个列表渲染。在列表效应里面，实际上就说了为负啊，里面说了不少东西，我们要找到它下面的一些说法。好，大家看到它有一个概念叫数组更新检测。

啥意思啊？就能够view，它能够知道你的数组内部元素发生了什么。变化。来下面有一个概念叫什么呢。变异方法。什么意思啊？来没有包含一组观察数组的变异方法，那怎么理解这个变异方法呢？说白了就是数组里面是不是有一些这些方法能够去改变数组内部的结构。可能是添加也可能删除，对不对啊，那这些方法说白了已经不是原生的数组的方法了。它是对原生数组方法一个什么呢？包装。那这个包装呢，其实是做两步啊，内部做两步，第一步调用原生的。这原生，譬如说push，它是不是添加一个元素，该添加添加，这是它的第一步，就是把原生的功能实现了第二步。

干嘛去了，更新界面。更新界面，那也就是说什么意思啊，如果他不做这个事情。他不做这个事情，我们通过这个，譬如说please方法，我刚才是不是用的这个。去删除一个元素吧，删除一个元素，如果它没有去做变异的话吧，那你想。我们刚才说过了，数组内部数据发生变化，他知道吗？他本来是不知道的，对不对，但是他是不是希望知道啊。怎么办呢？对数组所有的方法进行了一个概念，这个应该要知道干嘛呢，重写。重新实现，说白了就是把数组里面所有这些改变数组内部元素的方法重新实现一遍。实现的整体逻辑就两步，第一步把它原来的代码执行一遍。比如说我该以前该干嘛还干嘛是吧，第二步。

干嘛去更新界面去，那这样我改变数组内部的结构，是不是相当于也有了数据保定了，就本来是没有的，但是啊，一旦有了这个操作以后，它就有了，那也就是说。啊，那你就说什么意思呢，来。这是第一个，第二个啊，就是view啊，重写了数组中的一系列改变数组内部数据的方法。啊，方法，这个方法的整体逻辑是什么。OK。先什么是不是调用原来的方法，调用原有的逻辑啊，啊调用原生的。先调原生的，这是第一步，接着干嘛更新界面？

能不懂，那也就是说最终的结果啊，我去通过数组的方法去操作数组内部的元素更新了，有没有数据管理。现在有了吗？现在这不有了吗？你想想看，你调用它的这些方法，我调用这个SP。有没有数据绑定效果，有吗？我改变数据，删除了一个元素，它的界面是不是就变化了？那不有数据绑定吗？那么懂就是让数组的改变有了啊，就是有了数据绑定。数组内部啊，改变界面什么，是不是自动变化，自动变化，但是有一个事情啊，但是有是前提是你是不是必须去调用这些方法才行，好，现在你有问题。你说。

我掉了吗？我调查的任何方法了吗？说白了，我改变了数组内部的结果，他知道吗？他不知道。能不懂啊，OK，大家看看啊，数组啊，内部发生了变化，对吧，发生了变化。发生变化，但并没有啊，并没有啊，没有。没有调用是不是变异方法啊，调用变异方法，那实际上我们的view知道吗。不知道，他不可能知道。啊，OK，就是这样的一个事情。不会啊，不会什么更新界面。啊，那也就是说我们的这个操作不对吧，对不对，那既然不对，那我得去调用方法实现这样类似的同样的效果吧。

同样的操作啊，我们可以直接这么做，但这样不行是吧，这样不行怎么做呢。好，我们现在呢，要通过数组的某一个方法来实现这样替换的同样效果。其实用哪一个呢，也是用space。也是用不啊，同样一个方法，如果我这么写，是不是删除了一个，删除后我是不是要去换成另外一个，换成哪个呀，牛批。这13是不是就替换了呀，这个please的功能很强大啊。OK，它可以实现三个操作。啊，真伤感。能懂吧，现在这个第一个是不是时间的是删除，这个时间的是修改吧，那我要增加一个怎么办呢。哎，这个地方指定，为什么你。

就我不删除了。是不是可以可以的啊。当然我们现在是不是替换了，替换那就先删除一个。好，现在我们来看一下。来啊，点。有没有？是不是可以了，可以了。就这格式啊看。在数组边界的时候，就有这样一个问题需要大家去注意啊，需要大家注意好来。还有一个便利对象呢，大家搞一搞，这个是其实用的不算多，我来快速的给它弄一下，假设我现在要显示它里面的name和age。有可能吧，第二个元素啊。也是用ul啊，用ii。我微风写，好啊，看到我。写好这一个印，印什么呢？大家看到我印的就是应该是这个对象吧，这个对象怎么得？

啊，应该是中号吧，是不是一。能看到吧，嗯，好了，那这边写什么呢。对不对。好，我首先得确认一下啊，看着我这里面是这么写的，因为这个用的不太多，我先写一下啊啊，我先写个item，我也不知道是么，我先测试一下，也就是说我不知道语法，那我就来去在这个里面先起来，我们看看对吧，看看呗，是吧？啊别的我们都先不管，我们先看一看，看看是什么样的效果走你。把那个什么。啊，是不是那个属性的值都编辑出来了，能懂吧，这没报错啊，属性的都编辑出来了，没有任何问题，关键我现在还需要什么。

是不是还想需要那个名字啊，需要那个属性名。啊，这时候怎么办呢，来。需要属姓名，那我在想我们这个这个地方来啊，看看是不是这个。啊，试一下对吧。能不能看到，那也就是说在这个里面啊，在这个里面它用的跟上面不太一样吧。啊，这个里面被编辑第一个可以传什么，传的是不是属性值，那我其实最好写个什么value会比较好一点，对吧，那下一个这一个是什么。实际上是我的复姓名吧，也就是不是K吗？K能表达这个意义吗？啊，OK，如果你要想去加那个小v for的时候不都要加这个东西吗？那以好不好？

我用行不行，这样好不好，大家要知道啊，每一个K的值应该要。不相同对不对？我这么写能保证我每一个I的K都不相同吗？不能保证对不对，这是不能完全保证的，但是。他能不能保证？也就我对象里面是不是属性名都是什么不一样的吧。你说老师我要属性一样的，实际上是如果我有两个A属性，我一写是吧，来个A等于冒号一来个A冒号二，我有几个属性？一个吧。所以两个属性的话，不可能什么。是不可能一样的呀。啊，如果实际上就剩一个了嘛。能不懂属性名是不是我数据的标识，那标识能一样吗？

不能嘛。你现在是一样的，是不是一个覆盖的效果啊OK。这样，所以我的这一个K肯定是什么不一样的。能不能看到。啊，就这么个事，其实这个便利对象呢，很少用啊，用的特别少，大家了解一下就行。可以写是吧，嗯，可以啊，这是这个。