48_尚硅谷_Vue_源码分析_准备3

好，那现在啊，我们还剩下这么一个。大家看看这个方法是谁的？你看到我这么写的OB节点啊，是不是应该是O，我不嗯的实力的实力能调用是不是在圆形上面啊，看到我不同的表达方式啊，大家注意了。好来检测一下什么意思呢，看这个名字，这个好像用过吧，啊用过啊就判断这个属性是否是什么自身的属性，什么意思呢？比如说啊，大家应该是学过这个啊，快速的整一下OBj.has own property。嗯，假设这个应该传一个属性名吧，啊，那个for有吗？我有没有有没有有好OB节点has own property啊，再来一个啊，To。

首先来说我的oo能不能调出去。可以，当然可以啦。啊，你不要被吓到了，可以是不是，但是可以就代表我是自身的吗？不一定可能是圆形面上的，对不对，好，那也就是说根据这个方框里的判断，应该是一个是two，一个什么，或如果输出结果跟这个一样，那就过了。对吧，啊，没有问题啊，这是这个。好了，这个里面有一个非常难的东西来了，就这个。这个其实是有点小难度，主要是理解。啊，主要是理解相关的。首先呢，我要带大家去看一下文档，因为文档上面的有些说明呢，还是有用的啊。

啊，这里面有个搜索。啊，可以在这。搜一下。好，我们来看一下啊。看看是不是这个啊。好，现在是一个英文的，比如说这里面不有个语言，看到了吗？啊，大家不用点放上去就可以。啊OK，接着选择什么中文简体。好，这个里面呢，有一个描述，其实这个描述呢，不太好理解，就第一句话，哎呀哎呀。啊，这里哦，对啊，这个不能它在我的这上面不能去画笔啊，不能启动画笔来看一下。说这一个接口表示一个没有负极文件的。最小文档对象其实挺难，挺难理解的。

啊，这个得说一下，说一个事啊，我们前面是不是说过啊，一个一个接口叫漏。啊，当时没有机会给大家看，这次要看给大家看一下。啊，不是连接SR是什么no。嗯，No，是一个接口，也就是我所说的，它本身是一个抽象的概念。懂不懂，我们真正去操作的是肯定是它的一个实现吧。对不对，那下面看这里。这是说什么？No，上面所有no是不是应该有这样一些属性，无论你是元素还是属性，还是文本，还是document，是不是都应该有这些属性啊？好，下面说它的什么？方法你看诶，这个有一个我们经常用的东西。我看下。是不是经常用啊啊OK。好，下面。这不看这个下面这些说的什么呢？说的我这个接口到底有哪些实现啊，你能看到一些我们常见的。

这谁？什么节点属性节点嘛，对吧，好，我们继续往下看啊，大家应该因为D开头了，就应该要看到谁了。Document对不对啊，我们来找一下document，哎，我怎么看见啊，这里是吧。文档是不是好，应该还有什么。元素节点。是吧，还应该有一个。我们常用的是不是text好？我还要给大家看一个，大家看看这里诶。什么意思，也就是说我们现在要去学的这一个类型，是不是也是节点的一个实现。

怎么弄？好。那我们把它打开是可以去看了。啊，比如我们刚这个。那它到底是什么呢？好这个地方啊，看他的东西呢，可能大家不太好看，因为它直接翻译的，那我就去说一下啊，我对它的一个理解。大家看一下啊。嗯，首先大家要知道啊，Document定义一个什么。是不是对应一个页面，就是对应的我们显示的页面对不对。不包含的是什么？包含N个。对不对，那也就是说，我们可以把多个看成一个多个element的容器。但有一点，他跟我们看到的界面是关联起来的。

对吧。那一旦我更新多可里面的元素页面变变。变不变就一旦一旦更新啊，那个多品的内部的某个元素。界面更不更新，是不是界面更新对吗？好。那这种方式呢，就有一个问题，有一个问题，比如说啊，比如说我现在要将uii。所有的这个文本。都变成了的硅谷，你说我们一般的逻辑应该怎么做啊？先找到所有ii变异。是吧，拿出每一个ii。把他的文本修改为规模。是不是，那也就是说是个什么事，我先更新它是吧，接着更新它，接着更新它对吧，如果没有任何优化的话，应该是个是个什么情况，更新多少次界面。

三次，如果我1万个了。更新1万次。对吧，也就是说我说白了，我就是现在直接更新界面，对着界面去更新。这个更新的次数是不是很多，诶，就有没有什么好的办法能够去避免多次更新呢？能不能听懂，嗯，我就希望吧，我在更新这些每一个节点的时候呢，界面先不动是吧。但如果就用多去找ii去更新，那肯定动了对不对。这个时候他就是用来干这个事的。就用来解决这样一个问题。来说一下啊，他。

这个document。它用来干嘛呢？大家看呢，它首先我说它是个什么东西，对应一个什么，对吧，它是啊。内存中。保存N个element的容器，也就是说我们document是不是N个animal容器是，但同时它是不是跟页面显示的页面是关联的。但我这个仅仅是什么。内存中的一个容器对象。这里面强调。不与什么呀，界面关联，不与界面关联是个什么概念？大小。如果我去更新。如果更新fragment中的某个元素。

GDB吗？变不变？变。它界面不变，这个能不懂啊，它不变，记住了它不变啊。能听到吗？好。那就要利用这一点。什么意思呢，大家看着。我现在界面上是不是有这么的AI呀。大家看它这个UI里面是不是很多ii，我假设这边是我内存是吧，我内存我先创建出来一个fragment就是一个容器。对吧，把这个里面还。塞到这里来。对吧，塞进来之后呢。啊，变利ii，把I的所有，这不是每个是AI吗？对吧，放进来肯定可以变利嘛，必然可以。编译过程中把这ii的文本内容给什么，是不是跟替换掉啊？

也就是说，在我更新这个里面的ii的过程中，我的基本便变。不变对吧，那不变就好了呀，那接着等我更新完了以后呢。塞进去，也就是说我从多次更新变成了一次批量更新。能不能听懂啊，一次批量更新，看懂了吗？就是说白了就最终是不是希望减少什么更新界面的次数。哎，这样一个接口设计出来啊，专门就是干这个事。啊先理解，但写的时候呢，就是可能有一些新的语法啊，那个不是关键的，其实其实真正的大家去用fragment的机会呢，并不太大。

啊，因为我们现在要去看它的一些源码的实现，所以我们必须要知道它的一些小的细节。好，但写的时候有点小费劲啊，这里面还有写的时候，真的写的时候有一点麻烦的地方，我们来看一下。来，我把这个结构全部捞过来啊，整体捞过来看着写。因为这个隔得比较远。就这个呗，把它说一下。好，这样啊，我先啊把那个ul给他拿着。怎么了呗？是吧？好。来啊，我们要做的事情是把UI里面所有的子节点。是不是都要搞到一个fra面去，那你想啊，首先呢，第一步要想办法创建一个什么，是不是创建fragment。对，接着下一步才是取出啊，Ul中所有什么子节点啊，不仅是，哎，你这个也必须取。

你要不举这个，到时候再放回去，结构就不对了。协会就不能跟完全一致了，懂不懂？你现在本来有换行，你要不把这个换行这个文本搞掉，哎，后来就变成这个样子了。啊，应该是不I是所有的什么子节点啊，取出来，取出保存到哪去。对吧，下一步更新fragment中，Fragment中所有ii的是文本内容文本。啊，OK，好，最后一步。将fragment插入到里面去ul，但是fra本身是不会进入页面的，因为它不对应任何标签。

能懂吧，但我内部是保存了很多标签。现在又把我那个标签是不是塞到了UI里面。啊，先要搞清楚流程啊，流程搞清楚以后，下面我们再继续写。没问题吧，好。来首先创建一个fragment，怎么做呢？我们说要创建东西，创建元素，谁来创建？对，很好。有没有看懂啊，这样就创建了一个啊fragment来，我就用一个fragment来表达啊，就别写document fragment。也就是说，现在我是不是创建了一个空的容器？

跟页面关联吗？不管你。啊，关键点一定要清楚，那下面啊，下面这个有点难度啊。取出UI中所有职业，保存到去。这个怎么做？啊，这个稍微有点难度啊，我直接有有地方我就先写一写啊，先写一写，呃，我呢先先去取出这个里面的。啊，我先定义一个变量啊，我得我先写一写这个语法呢，有点有点麻烦。不，我先写了，到时候问大家一些问题啊，大家看着我。等于啊那个。Ul点线什么意思？第一个节点是吧，好，我里面再写一句话啊，叫fragment.a pen，好。好，接下来我要问几个问题啊，这个问题呢，是啊，跟应该最最基本的一些问题啊，看到这里先理解这句话。

就这个well。我觉得大家有的人都不太理解。它有一个有基本流程，首先得说它肯定是一个循环的判断，对吧，那循环判断这个就是判断里面做了一些什么事情，他光有判断吗。不是，它只有两步，第一步是负值。赋完值以后再去判断什么意思呢？是先取出UI的什么第一个孩子，那先取到谁？这一个换行的什么节点，文本节点懂不懂，取到这个文本节点以后复制谁。亲的，接着再判断的为不为什么真。听懂不啊，回不回真，那我要问大家了，再问你，我这一个为真吗？

它这个地方这是一个换行文本，现在怎么可能为假呢，只有一种情况为假，就是搞搞搞到最后。我是空的。我什么都没有了。懂不懂，我这个是一个换行，我没记，换行也是个字符啊。就那么懂啊，也是一个文本数据，只是我们平常不用而已。嗯，OK，好。我先把这个隐藏掉。我现在问大家，你说现在如果就这么写的，会出现什么情况？你看哇，亲爱的。啊，等于u.first。那不先你看着走嘛，是吧，取出它。复制给他这个为什么进去。接着又回来UI减负，现在谁呀？

那你告诉我结果是什么嘛？对呀，你只要说死字就差不多了。对吧，死循环对不对。啊，就是个死循环，但是一旦我加上他以后就不是死循环。啊，这个里面主要说这个aend是个什么作用啊，最基本的作用大家应该知道，就是将一个节点添加为。他的什么？是不是直接点了。但是大家要知道一个事情啊，有一个是一个节点，只能有一个父亲。什么意思啊，大家想，首先。这个我们就本来他的父亲是谁呀。Ul是吧，那你现在最终把它放哪去了？你的放哪个里面去了，也就是说现在这一个换含的这个他的父亲谁了，啥意思，那也就是说他会将这一个文本节点从这个UI里面什么拿出来，什么叫拿出来了。

啊，就衣服。懂不懂啊，那也就是说其实这个碰了气的干了两件事情。对啊，OK先。将什么亲爱的从哪个地方移除？Ul中移除。接着干嘛添加为fragment什么子节点？对吧，那也就是说我现在要去刷新会是个什么情况。现在不显示的吗。咔嚓一下没了。

对吧，没有去哪呀，就去内存里面去了呗，对不对，也就是说我们在线的去看页面，你看它就剩一个什么。Ul了。你把一下把他干懵了是吧，啊OK。好啦。那现在转移工作是不是做好了？啊，其实现在是有一点问题的啊，后面我们再说啊，先暂时这么做的好来下面。更新中所有ii的文本。那我这一个fra里面是不是很多子节点呢？我的变例呗，来看到我先拿到，我有一个东西叫叫切，或者叫children，我们有两个属性啊，一个叫切什么意思。所有的什么子节点啊，但是呢，还有一个属性叫children，准什么意思。

知道吗？这两个是有区别的，面试时候容易问啊，刚才的这一个是得到所有的子节点，而这一个实际上是得到的是什么呢？所有的指标签。看到吧，啊，我们还是用一下这个啊，用一下下漏这个比较通用啊用它。好，这是一个尾数组吧。吧，你通过多母的方式取到的那多个多个节点啊，多个元素都是尾数组。那我想去便利他们怎么办？那便利那一个方式用负循环。对吧，另外一种用我们刚才学过的。那个语法。是吧，你将尾数组，我根据它生成一个增数走呗，怎么做A点把点空数组。

返回的是不是数组？此时我可以干嘛去？不好意思是吧，拿到的是不是某一个节点。对吧，而这个节点有两种可能性。一种可能是这个换行的文本，一种就是这个标签。对吧。但是我要操作的是换行文本吗？不是我要操作什么标签吧，对吧。那好了，我怎么知道这一个节点是一个ii呢？它有两种可能性，一种是文本节点，一个是标签节点，只要是标签节点，那必然是ii。对不对，搅拌。哎，刚才咱不学过吗？因为你尽量利用一下咱学过的语法，其实刚才我完全可以用那个child的children准不用这个语法，但是呢，我还希望用一下，赶紧学过来判断一下我的load点漏type。

什么等不等于一吗？对不对，说明当前的节点是什么节点。元素节点嘛，听到不，那元素节点必然是谁ii嘛。对吧，那你说我干嘛呀。既然是ii嘛，那我就是把它的文本内容。给他什么替换成它的硅谷？对吧，好，那我问一下，我现在刷新页面会不会显示。啊，不会对不对，还有一个事情，你说我在做这个事情的时候，界面更新吗。那也不可能更新，即使页面有什么显示也不可能更新，对不对，因为我的这个跟页面什么。不相关，我仅仅是内存独立的一些东西，对吧，好，最后有一步。

嗯，就插入实现批量更新嘛，那怎么插呢。A，他需要接收一个什么？接收的是个什么东西，什么类型，是不是漏的对不？那请问我的这一个fra是漏的吗？是不是弄的类型，我这个fina。是不是？刚刚看完又忘了。我刚才给他看了一长串，我们说姐下面有document有有的，后来发现有一个document咋回事呢？对呀，所以我就把它塞进去啊，因为只有保证他能接受这个类型，你才能放。对吧。那现在刷新一下。

是不是可以？嗯。其实这个部分写这份代码其实很考验基本功。啊。看，但是呢，这边代码其实尤其在前面这一段，实际上是有有问题的，这个问题呢，我希望大家自己能看出来问题，嗯，如果大家有人看出来，我们后面再讲啊，如果没有看出来，那说明你们根本就没有讲的必要。啊，OK，你们一定要有人去看，大家都尽量去看一下，我提示大家这里面有问题。嗯，OK，好，你先不要不要去，不要去太纠结，你现在后面看一看，看一看以后呢，我们明天再跟大家说一说，这个问题先这样放着啊。这个这个部分呢，写起来还是有点费劲啊，大家如果自己写的话，尽量自己写一写好，那到此为止啊，我们的相关的一些。重要的一些点就都跟大家讲了，讲一些基本的语法。嗯。