52_尚硅谷_Vue_源码分析_模板解析_大括号表达式

好，那我们就接着上午的讲啊，我们下面要讲一个是一个概念叫模板解析。首先我们要来拆分来说模板，前面说过模板是什么？就是HTML嵌套了什么GS代码对吧？那GS代码以什么样的形式存在于页面里面的有两种语法对吧？OK，指令属性和什么表达式。对吧，那我们就是要看那个表达式和指令如何来去起效果的呗，对吧？OK，那我们先来看简单的表达式，稍微简单一些。来啊，我们把那个这个。啊，BU的这个我们就不写了，直接写这个的就得了。

什么意思啊，来去等一下div。再下来一个ID，来个来个P标签，好，就是看这个看它。啊，将来如何显示是吧，好，那我现在要引入一些JS啊，这个呢，跟刚才类似是吧，把这整个。拷贝一下。稍微的改这些都不需要了啊，这些这些后面都不需要，包括这个变量也不需要。哎，好像差不多了。也就是我定义了，定义了一个name。看一下。那这一个name属于对应的值，是不是显示在页面上了，哎，那我写的时候我就写了一个。这样的一个P标签里面有一个两个大括号，一个类，它如何显示对应的数据的，这就是我们表达式解析需要研究的内容啊。

来吧。要看必须得去还是那个B调试。嗯。好，这一次呢，我们打断肯定要从这个里面开始啊，从这里开始吧，把这些前面的断点都去掉，好，这里面你看我有一些断点存在了，我想给它去掉，全部去掉怎么去了，那去掉一个很简单，是点某一个是不是去掉了，那关键很多啊。对不对啊，这里面列出来一共有三四个啊右键。是不是有很多操作啊。所有。好，下面呢，就在我们想要加断点的地方呢，去加上断点啊，看着这个钩子函数里面。在这个构造函数里面啊，后面有两条语句。

就剩两条鱼了。一个是调用一个observe observe什么意思，观察。某一个date去的。而下面这个是在干嘛？B，那你说我们要去看模板解析，看哪一个呀。看第一个还是看第二个编译，其实解析就是编译在他眼里懂不懂，好，那也就是说我们要去进入这个里面去看，我完全可以把这打个断点啊。过来。过来了吧，那他溜了一个compare compare从哪来的？啊，我们是不是引入了一个JS叫compare对吧，实际上就是它向外暴露了一个提供了一个什么compare的函数。而他在这里面是不是六一个看票的实例，就留一个编辑器，相当于对吧，传入了一个东西，它传的什么。

Options点或者document什么意思，首先啊，这个或者什么样的一个作用啊。如果左边有值传左边的对吧，如果没有值传谁是不是传右边的这个摸底对象啊啊OK this是谁。应该是VM吧，对吧，就VM。郑艳二是谁啊？一我们有没有有它的值是个什么值啊？是一个选择器的字符串，也就是他。对吧，啊对，没有问题，好，那我们现在应该要怎么调试了。点第一个点第二个，还点第三个，第三个我要什么，是不是进入看了。

好，这里面呢，就传了一个E，大家看到是这个字符串传了一个VM实例，对吧，没什么问题，第一条语很简单。保存备案下面这个，下面这有一个，先是有一段这样一句话，其实根据名字你就知道他在干什么。判断你这个E啊，是不是一个元素节点，如何来判断一个一个东西是不是元素节点呢。就看它的等不等于几一。来给大家找一下那个那个方法，那个方法有点靠下。能看到吧，非常简单，我当前是不是。我当前E是不是是还是不是不是，我的E是个字符串，怎么可能是一个元素节点呢？

对吧，它对应一个元素节点，但并不是元素节点，对不对？好，那如果啊，你是元素节点，那就乘E，否则干嘛去。否则通过快来是不是查找啊。也就是说最终的最终，我的这一个this里面。是谁啊，还是VM？现在肯定不是VM，现在都到compare构造函数里面了，是不是看的实例也就是一个编译对象吧，啊，一个编译对象存这个多拉负一啊，存的是什么？它肯定存的是一个动物元素。对不对，就不懂。好，记得他判断。你的这个存在吗？

存不存在，肯定存在，我们对应那个D吗？啊，如果你存在我就继续好，下面是做啊。编译，也就做模板解析的最重要的三条语句。以及它重要的三步来看，第一步它有这样调用这样一个方法，叫load是什么？啊，这个可不是啊，是对吧。什么意思？这个to是这样一个意思。能不能啊，To。啊。这是一种平常经常用的一种写法啊，这个啊是代表是将漏将一个节点转换成什么。Fragment。什么个意思呢？其实这个里面代码大家都懂，大家我们可以进去看一下，怎么进去看一下，是不是跳路看一下大家能看懂的，其实这个代码咱写了。咱们写过这段代码吗？

能看到吧，你看先是不是创建一个fragment定义了，并同时定义了一个变量加C的。接着不断的取出EL里面的所有的节点，考不到哪去。Fragment里面去能不能看到，而且这个应该要要去编定好几个，因为我一共有三个直接点。一个大家看呢，两个换行节点，再一个P标签对吧，好没问题，刚才编辑了三次，我就不一个看了。好。最终返回谁？Fragment。第一句话应该是比较好用，说白了就是把页面里面，EL里面所有的子节点都转移到哪去里去。这不，我们前面做过这个事吗？对吧？下面是最复杂也最重要的一步，Unit初始化也实现，用来实现初始化显示的，那要实现初始化显示是不是要把模板解析好？

呃，这个里面就是去解析模板了，那我问你是解析哪个位置的。是不是frag里面的。好，这个呢，我们先不仔细看，先过去。好，我问大家页面现在显示好了吗？有没有没有页面，说白了，现在是空的，啥也没有了。对不对，因为我把这个div里面的这些所有的子节点都转移到内存里面去了吧。页面里面还有吗？没了，那也就是说这一个是不是编译的是内存中的一些节点。最后一步干什么事，是不是又完了塞回去啊，这一塞回去就干嘛，就显示出来了，哎，还有两卖啊，但最后还缺一点看一下。按理来说应该已经出来了才对啊，呃，多了伏EL，哎，现在我怎么看不到呢？

再来一下啊。这里面现在我什么什么显示都没有，这不太正常了啊，我这个现在是写类吗？看一下。是写类对不对，没问题啊，按照来说应该要显示来刷一下。刚才进去啊。开始是表达式，是不是这个表达式文本直接显示，这样是不太好的，对吧？啊开始就是现在就是这个样子，接着过来。接着是把它转移到内存中去，是不是没了呀，接着是初始化，在内存中进行编译，编译完了之后添加回去，这才正常的吧？嗯，对啊，没问题。好，其实麻烦的是第一步，这一步初始化，其实第一步和第二步都固定对吧，非常简单。

啊，难点在于我们的这一步。啊，所以呢，我现在专门去研究啊，刚才那一步我把这个大点给他干掉啊。我们来看一下我们要研究的那个部分，就是这个，就这一步。那我现在进行什么样的调试操作？应该进去看吧，我不想看他，你们内部怎么做的吗？记录好。它好像这一个里面也很简单的，就是就执行了一条语句compare element怎么翻译编译元素，但实际上现在传过来是什么gment，是编译fragment本身么？不是是编译什么fra里面所有的节点吗？啊来。我们再接着进行什么操作。还要继续进入吧，因为你跳过就完了，对吧，好再进入。

好，那这句话用来干嘛呢？它实际上用来去编译这一个节点，嗯，这一个节点所包含的所有子节点。啊，所有的子节点，你看他一上来就干嘛。是不是取出所有的直节点，但是是最外层的直接点吧，能不懂最外层的直接点取出来。啊。好取出来之后呢，啊把日保存，这个日是谁。Compare的实例是吧？啊，Compare的实例，这都没什么好，下面干嘛去？整体在干嘛，你别说，哎哟，它把它转换增数组，这是不用你说的，你就说他在干什么事，遍历每一个子节点吧，那我现在是不是要去看回调函数里面一步一步怎么做的呀，所以我应该怎么操作，怎么样操作记录吗？这个不太好。

因为下一步也不行，下一步把整个函数都执行完了，对打断点这个非常关键。嗯，因为我这里面整过程中是不是执行了好几个函数啊，我点进入那每个函数都要记一下，那太费劲了，我们就希望它能进入什么回调函数的时候，我看一下。对不对，好点什么，是不是点它。点它或者它是不是都可以，其实点它也可以，对不对啊，这个上面呢，显示的是快捷的操作啊，那有时候也可以点这里没关系。好，我们来看一下。现在这个节点是哪个节点，大家说。文本经典是哪个文本经典呢？就是第一个换行，那么看到第一个换行好了，那得到的内容就是画行，看到了吗？位着画行好了，接着这是一个正则对象吧，好，现在说这个正则对象用来匹配什么的。

是不是用来匹配大块表达式的？能不懂就两个大括号，比如说就是我们当前匹配的，这个应该是我们当前情况是不是匹配了它没问题吧，好没问题下面。啊，下面我们来看啊，说我的这个节点是元素节点吗？是还是不是不是，我们现在节点是什么节点，文本节点，所以if会进去吗？不会，哎，我懂了这个else看一下。二要看一下，看看S1刚才多点了一下，他有没有进去，什么意思，说你的这个节点是文本节点吗？是不是，是的，我当时就是个文本节点，并且它是不是同时还有要求啊，说你的这个节点啊，大家看到你是节点文本。跟正则匹配吗？

匹配吗？不匹配，因为我的正则要求这个文本是不是外为是不是两个大号啊，包括有吗没有，所以这一个l if是不是也没进去，好也没进去。好，下面。下面有意思啊，说你的这个时间点又有孩子吗？是这意思吧，你看嘛，本来我就是个子接点对不对，他又去找他的孩子，并且你的孩子的长度是吧。是不是要大于零。说白了就是你有没有孩子，你要有孩子，他干的事情是什么，大家看一下。他又会去调用，就是调用当前这个函数吗。什么意思啊，OK，这个地方，也就是说这个方法是不是要对所有层次的子节点进行编译。如何实现对所有层次的都进行便利编译呢？只有一个方法最适用递归。对吧，递归是能够去把所有层次都变利，变的最好最直接的办法。

而它这里面就用的是递归，当我现在能进去吗。If能不能进去，进不去，因为我是一个什么文本节点。能不能看到，好，那我点一下它又来了。好。这一次他。奠定到的是哪个节点，是不是P标签节点，能不懂P标签节点，好了，说说一个什么事得到，哎，它的我们内容这个是吧，轴零啊是个正的对象，好了，当前的这个节点是一个元素节点吗？是是不是是那就不要进去，那进去它的这条语句用来干嘛的，现在我们暂时还不研究它，我说一下结果。这条语句是用来去编译元素节点里面所有的指令的，大家知道指令是以什么形式存在使用，是不是以标签属性的形式写上去了，那也就是说，一旦判断你是一个元素节点，那我就要调用这条语句去编译你所有的指令属性。

那下面啊，我这个过去啊，因为我当前的标签有指令属性吗。有没有看嘛。没有吧，没有，那没有啊，这句话我们暂时不研究啊，暂时不研究，走这个说你当前是一个有孩子吗。有没有有非常有，我这里面不有一个文本子节点吗。有吧？看到了啊好，那如果你有他就把这个当前节点是不是P传过去，好接着又来了。现在啊，现在处理的整个节点啊，整个节点大家看到。

这个编辑到的是一个文本节点，哪个文本节点。哎，过来来给我们一点。其实不是，是这个不递归吗。能不能能理解吧，是他，而这个就是我们要观察的目标。也就这个文本节点最终是不是替换为它的文本，从一个大块表的是变成了一个具体的值啊，那如何做到的呢？那就看这是我们研究的一个目标了啊，我们来过一下。正则对象，哎，得到的是不是这样一个文本没问题是吧？正则对象接着能听清吗？If。能不能不能，这个衣服能进去吗？来，哎，这一下非常关键，是可以进去的。能不懂？好，那下面就要说我们这句话来，这句话是干嘛去的？

编译文本节点的，对吧，而且这个文本节点必然是一个大括号表达式文本节点嘛，好看他传的东西。首先传的是这个节点文本节点，接着好，这个要说一下，看一下这个正则，这个正则有意思，这个正则吧，我来打开我们这个位置啊，来说一下这个正则有点小意思。大家看一下我们的这个我们的这个表达式，我们说这个表达式是不是用来去匹配它的，我们写个例子对吧。这两这个大括号比较特别，所以它必须用一个什么呢？转移字符，那也就是说它匹配到了左边的两个大括号，而它匹配到了什么右边的两个大块中间是什么任意多个字符。点是不是代表什么？任意一个字符就是心呢？任意多个对不对？但你没发现它多了一个小框，也就是说我要匹配这一个表达式，其实这么写就够了。

懂不懂，我这么写吧，就足够匹配到这一个它了。能不能，但是加这个小括号是用来干嘛的呢？有一个概念叫值匹配。是一个什么意思啊，大家在想啊，我需不需要取出这个name，要不要这是我们到时候取数据的一个是不是标识名称的表达式。那怎么样啊，能够去既把整体又匹配出来，又匹配出来其中的某一部分呢。这个地方就可以用一个小括号来包裹一片内容，这样这一片也会做匹配，那也就说这一片匹配到谁。这个小括号部分匹配到了谁呢？它不匹配到name吗？

那么呢？而且它会将只匹配匹配到的内容保存在这样一些东西里面，什么多了一，多了二，多了三。啊，你说老师为什么会有这么多个呢？我有可能会匹配一个，也有可能匹配两个，也就说我要匹配到两个，我就把第一个放在多了一里面，把第二个了。放到多少方案里面？啊，其实它这里面多乐福提供的还还还有好几个啊，OK，能不能懂，大概就是这样的一个意思，大家看清楚，我们当前这个小括号，它有一个概念叫只匹配，用来匹配什么呢？匹配出大括号里面的表达式吧。匹配出大方，也就是匹配出谁name，那也就是说这一个的结果是什么？这个的结果是是不是内它已经有内容了吗？那我是不是取出那个匹配出来这个表达式。

啊，来看一下是不是啊，我们看一下，我们就知道放在这里是不是name啊，就是啊，OK，好，那也就是说我们需要去看一下它是如何实现的吧。下面进行什么操作。是不是进入啊，啊进入好。进入之后啊，后面就难点来了，因为大家看一下，大家会慢慢的发现这个函数调用的乘积。越来越多，就是这实际上是一种什么调动产生的结果。递归，那不能叫递归，那递归只有一种情况，就是呃地叫自己，那现在是自己叫自己吗？不是，那叫什么调用。啊，我们说递归是一种特别的什么，就用。不知道什么链式调用不对啊，嵌套调用啊，嵌套调用也就是说说白了，A里面调BB里面调CC里面调D。

懂不懂，那递归是一个什么样的意思？A里面掉，AA里面又掉AA里面又掉A。懂不懂，那也就是说递归是不是前到六。是啊，递归是一个嵌特别的嵌条任务对吧？啊，就是调用的层次很深嘛，说白了第这一个是由下面这个掉了吧，而下面的这个是不由他掉的，一是往下推。啊，这个调用的层级会越来越深。人家说老师那不程序很复杂吗？啊，当然是有点复杂度了。嗯。好来看一下，看一下这个名字，这里面需要涉及到一个工具啊，工具叫comp u。啊，他去调用T似的，看它干嘛啊，这实际上有点类似于我们的那个，那看这个名字，你看这名字特别有意思啊什么。

啊T的还有什么别的看一下。嗯，这个呢，叫T的，还有什么别的吗？呃，等一下啊，我把它打过来看一下，这边看这个名字，这都挺有意思的，泰的HTM摩啊，Class band，你不觉得这名字好熟悉啊啊对，就是一些指定的名字。啊U，我们说是用的是一个什么东西工具对吧？那翻译过来怎么翻译啊，编译指令的一个什么工具对象，那而这个工具对象里面是不是提供了很多相关的一些方法，对吧？那也就是说这一个这一个方法用来帮助我们去编译哪个指令，V干text，而微干text其实本质上跟谁是一致的。

大括号表达式。对吧，也就是说你去解析V-T的和解析大括号表达式用的是同一个语法，用的是同一个这样的一个函数。这里没懂。啊，OK。来，我们再来看一下，看下这里传哪些参数，第一个是我这个文本节点，第二个是谁。这谁？VM吧，多了VM嘛，这不是VM对象吗？能不能看懂，而这一个是什么？是不是表达式这边内嘛。能不能好来，接着我应该怎么操作。跳过吗？不能，你得继续往里面看，你不往里面看，你是看不到最终怎么做的，对不对，继续往里面看，走里。

好，他好像也干的不太多是吧，啊来。这个地方我们来看一下啊，BB什么意思。绑定啊，我们说那个有个概念叫数据绑定，对吧，叫数据绑定啊。绑定说白了就是要理解这个表达式，看他怎么做的，我们来看一下，这里面涉及到文本节点VM这个什么表达式这一个。其实你没发现吗？这鼻子都很对应的，看到了吗？这不就是我们对应的子粒名吗？是吧？啊，我们说子令名包含为纲吗？不包含，那这样我进行什么操作？在干嘛，再见。能看到吧，好，这个时候就有点小复杂了。好，这里面要说啊，说在看他之前，我先带大家看一下下面的一段代码。这里面有一个对象叫update update什么意思？Update更新那加个ER。

啊，我们可以把它看成一个更新器对吧，而更新器里面有很多更新的方法。啊，OK啊，我前面跟大家说过一个事情，说过什么呢？所有的指令是用来干嘛的。指令。所有的指令都干的事情差不多。或者他们都有共性，首先指定用在哪个地方是标签的属性呢，对不对？那那标签属性是为谁服务的？操着谁去的？操作标签呢，那自然是对吧，标签属性肯定是用来去操作标签的，那也就是说指令最终是不是去操作标签的。好，你来看这些方法名，你看这些方法干嘛，这个text看一下里面内容。

操作节点的什么属性T看操作点的什么属性in the h这个是操作节点什么属性class name这一个操作节点什么属性value对。也就是说，这些方法才是去真正去更新节点的吧。能不能给节点啊，指定特别的属性值。那也就是说，你要想显示出数据，要想更新这些方法，是不是必须要调用其中的某一个？认懂吗？好，那你说我们现在会掉谁了？应该会掉它对吧，我在这里打个断点。那怎么确定调用谁了？像这么多方法，你看这个方法它有它有共同的规律，看到规律了吗？左边差不多是那个指令名。右边是共同的一个名字叫什么？

对吧，好，来，回到我们这里来，大家来看这是个什么概念。我这是我的指定名。对吧。什么意思？阿巴中括号这样一个东西，得到一个更新的什么函数，它为什么这么写？这么写好奇怪哦。我们说过，我们现在要取对象的一个属性有两种方式，一种通过点，一种通过什么数括号，而现在我的那个属性名，它是个什么变量，它是个变化的值，那此时必须用哪种方式中括号？啊，你要这些是最基本的需要必须理解的一些东西，如果你基本语法不太懂，那这个就更没法看了，也就是说再问一个事情，它的值是个什么类型。正当机关应该是个函数吧，为什么是个函数啊？你想啊，这个update里面包含的是些什么方法嘛？

对吧，就各种各样的方法嘛，能不懂我现在通过属性得到的结果就是什么。是不是一个一个的函数。这是比较基本的知识啊，只是说它放在了这个环境里面，可能大家理解起来就要费劲一点。它本质上是一样的。我们来过一下，走理。是不是函数是不是F代表函数吗？方形。就是这个啊好。下面诶这个是这个吗？这右边来看是执行这个函数吧，左边啥意思啊，嗯，对吧。这是种简洁的表达方式。啊，如果它不存在，我右边会执行吗？不会，那如果你存在了直行右边的，直行右边的是干嘛去，是不是调用这个更新函数，调用更新函数干嘛去的。

是不是更新节点，给节点赋值？对不对，给节点指定特定的属性值，我的界面是不是显示会显示出来，嗯，好，这个地方我们来看一下，这里面传两个东西，一个是节点。这个是在干嘛？大家想，我给节点赋值是不是得有一个值才行？我我不得得到一个值吗？你看它get vm v什么意思？什么是简写value啊，这个函数啊，我们来看一下在哪个地方。这个函数其实整体来看它有点小难度了。这是VM，这是我的表达式内，最终是不是通过这个表达式得到它对应的值？有人说老师这个事情不很简单吗？不应该VM点就得了吗？你想想VM点点什么呢？

点还真没法做，因为我现在的这个表达式是个变量吧，对不对，我要取到内部所对应的值，我该怎么去。VM中国卡呗。是吧，但是为什么你这个这么复杂呢。哎，对，你的表达式我现在是不是写了一层了，那我也可能写a.b.c。你想啊，你要是a.b.c你这么写法对吗？还对吗？不对啦，我要是a.b.c你要这么写，那肯定取不出来数据，因为我的VM里面根本就没有这个属性。对吧，VM里面是不是先只能根据A取到一个值，再从那个值里面再取什么。B得到一个值以后，在值里面取什么C。那就存在一个便利的过程，首先要对表达式进行什么呢？拆分，接着便利的一层一层的去取。

啊，取到的是就是我最终的一个结果，当然我现在只有几成，我现在只有一成，能不能看到，那他一次遍历是不是就能得到数据。是不是得到数据了？看能不能看到，好，现在我问大家打开啊，我点一下它会怎么出现什么样的效果。点一下它啊，我这个地方，我是在这里打了一个断点，对不对，我们刚才推测是不是要执行到这里来是吧，看一下是不是走你。过来没有？关了，而这个过来以后，下面是不是将这个值复制到哪个属性上面去text contain。那其实到此为止。大块表达式就解析的。

完成了。看。那后面是六了一个什么。What啊，监视，这是为后面更新做准备工作，这不是我们现在要去管的事啊，后面我们再去看它。那也就是说到此为止，就是一个。大括号表达式的解析的流程。啊，整个的层次是比较深的，一层两层三层四层五层，六层七层。八层、九层、十层、11层。啊，有十几层。人说，这不很慢吗？啊，我跟你说你用到的库，你是没感觉，你感觉好像自己就显得一点点对吧，但真正运行的时候，那它运行的层次还是比较深的，包括大家去运行浏览器是吧，浏览器的内核它也是很多程序运行，这里面也有很多层次的一些调用，这很正常，计算机的处理速度还是很快的，你不要担心这个事。好，那到此为止了，我们就去分析了一下它的一个整个一个过程啊，后面呢，就没什么太多可以分析了，其他的都差不多，我就不再去一步一步的看。

但是我相信估计很多人都是蒙圈的，因为流程太长了啊，流程太深太深啊，就我第一次看，我也觉得很深，其实就是看，就是看，你最后把它看明白了就好了，很正常啊，没事啊，我们后面。