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

好，我们把那个整个过程再整体的过一下啊。啊，我们从这阿开始说起啊，就这一条语句，这个语句呢，从语法上来说是创建了一个编译对象。而这个编译对象就是用来去编译解析我们的模板。嗯。好点过来。啊，这个里面前面都很简单，前面都准备工作啊，大概说一下这个是保存VM到哪里面去compare对象对吧，就是对象再点一下OK好。这个。是不是将EL元素这个地方有个概念，将EL对应的什么元素对象保存到也是compare对象里面，对吧，只是说不同的属性名。

啊，这个名字好，下面下面这个是不是为了去。判断它是否存在，也就是说这个找一定有吗？是不是有可能没有。也就是我随便瞎写了一个，我有可能我瞎写了一个P特斯拉有吗。能找到吗？找不到对不对，那找不到是不是有可能没有，所以他这里面做了一个啊，比较谨慎的一个判断。啊，如果存在对吧，如果有，如果有第二元素下面事情才能做，前面通通都准备工作，这个你不用太背的，太死不用去太去背，主要是整体的三步。这是我们去编译模板的整体三步，那第一步我写个标号。

什么呢？取出EL元素中所有子节点对吧？保存到哪去？保存到一个对象中。对不对？而下面是干嘛初始化啊，说初始化可能就不知道在干什么，那我要说一下它初始化到底做个什么事情，就是编译fragment中所中所有层次。自己点。这个地方特意的强调一下是什么呢？所有层次的直接点。因为后面要涉及到一个概念叫递归是吧。哎，好，第三步。编译完了以后呢，将编译好的添加到。

啊，页面的E原始中对吧，说白了是不是在页面中去显示。那也就是我第三步不执行页面会显示一个最终的一个界面效果吗？不会。那在我编译的过程中，它会更新界面吗？也不会。那么呢，这个整体三部是大家需要知道的。而第三步最简单，没什么好说的，第二步呢，我们前面写过是吧，跟我们前面写的基本上是一样的。先是创建了一个什么创建空的fragment的容器，对吧，Fragment对象啊下面。

来把这个去掉啊。这一个是便利。最终将。嗯，就写个。将啊EL中所有子节点啊，子节点转移到哪个里面去，Fragment中最后是不是像frag给了什么，是不是返回呀，这个也不用写一啊，这个写写123没什么意思。因为这个比较简单。好。那下面其实最难的是这个。这个音呢是相对来说复杂一点，因为它的流程呢，就是比较深啊。那我们一个来做，首先这个是在干嘛去了。那叫翻译过来就叫编译元素呗，编译指定，嗯，容器的所有。

啊，直接点就编译元素吧，先先写一个写一个编译指定的编译元素，指定元素其实这个名字呢，不算是特别好啊，叫编译节点会更好一点，因为现在其实传的是什么，传的是一个反的对象。对吧，它里面是包含了很多节点的。不一定，这里面除了节点，除了一般的元素节点，其实还有文本节点嘛。按这个名字就让他叫个这个名字吧，其实它本质上是干嘛去的，它是边线它本身吗。不是记住啊，它这个编译指定元素实际上是编译谁去的所有层次的什么所有层次的子节点。懂不懂啊，就是这样一个事情好了，那如何来实现编译所有层次的子节点呢？

那就看下面它的实现了先。取出最外层的，这是取出最外层的吧，所有时间点。就第一层对吧，好，下面这是在存什么，保存哪个对象，应该是compare对象吧，这编译对象嘛。这个意思，这都是compare的方法。能看到吧，好，这都是其他这个这个东西没有什么太大难度啊，主要是他的这整个流程啊，来下面干嘛去遍历所有子节点。对吧，这个节点啊，有文本节点，也有什么元素节点，这两个比较主要就是这两个。这个能不能懂啊，文本节点和元素节点好，下面。

得到节点的什么是文本内容啊，文本内容好，下面。这是创建一个正则对象吧，创建正则对象啊呃，这个正则匹配什么呢。啊，是匹配什么东西的，是不是大括号表达式啊，匹配大括号表达式。大括号表示。啊，OK，好，下面这在干嘛，判断节点是否是一个。元素节点。如果是了，编译这个元素节点这个编译啊，编译元素节点这一个编译啊，编译它编译它是编译什么去的。

对吧，我们来去简单的看一下它这个编译是到底是编译解析什么东西。来看它上来获取什么。获取属性，他为什么要整属性去啊。指令，其实这一个是去解析指令的，或叫编译指令的。也就这个方法是用来去编译指令的，能不能看到好，那下面下面这个if判断是一个什么样的判断意思呢？判断节点。嗯，节点是否是啊，表大括号。大括号格式的什么文本节点？

你是文本节点还不够吧，如果你换行文本节点，那我肯定不能不用处理。因为它这里面不有一个匹配嘛，对吧，好下面呢。这编译这一个文本节点啊，编译大括号表达式文本节点。这不懂啊，这整个流程啊，就这样的一个回事，好下面下面很关键，因为我们说过了要编译所有才知道。这个整体是什么意思？如果当前节点还有什么子节点？那通过递归递归调用。实现什么？所有层次节点的什么定义？

那也就是说，一旦进入if了，是不是又从上往下回来再做一遍了。这什么呢？啊，实际上就是一个立威。那现在呢，就是我们整个去编译元素的时候啊的一个整体的一个。一个流程其实难，后面呢，就是这两个东西了，其实后面不就这两个事吗。我们说我们解析那个模板。分两个，一个是大块表的是对吧，一个是指令。这个上面这个是不是编译什么指定去了吧，啊这一个呢。大话表达式的。那我们只要分别是不是看下面的这个，看上面这个是不是就可以。而我们的重心呢，是现在是看这。对吧，哎，看他。啊，首先这个地方啊，要写它之前，我们先把这些先搞定。

这两个工具对象。对吧，这一个是一个什么样的工具对象。更新指令啊，更新节点嗯的包含不说，包含多个更新节点嗯的方法的。工具对象，也就这个工具对象里面包含的这些方法，这些方法干嘛去了，更新节点的，那更新节点是不是就给节点设置特定的属性值。有哪些呢？看到这个更新节点的什么东西，是不是content属性值？对吧。或者叫设置，因为第一次其实也不能叫更新对吧，OK啊，就等一个叫他更新完这个。

因为这些呢，它是有特定的值的，来下面更新节点的，这个就是后面的不太一样了。什么是不是应了HT属性质对吧，下面往下。这个是更新节点是什么？哪个属性不是好像class。对吧，啊，OK，下面一个。这个。更新节点是什么，Value属性值对吧？嗯。好，里面的写法大家是应该是可以去看懂的啊，就是它现在只是只是有一个容错的判断，就是看一下你的value是不是有值啊，你要显示这个按find的，这就不太好了，如果你是按键find，就显示什么空串，就什么效果都没有，这样的用户体验更好一些。

嗯。啊，具体有一些呢，到时候我们后面再看一看啊，这简单的其实并不太难。好，有了它以后，下面那这一些里面的方法谁来调呢。这个里面。来看一下。那现在我们要说一下这一个里面的东西，这一个对象是一个什么样的对象呢。对吧，OK。包含跟上面的写法一样，包含多个啊解析指令。的解析指令的，呃，方法的什么对象工具对象嘛，还一个因为它是U。再一个。解析哪个例对吧？解析V-text实际上也对应于谁的大括号表达式。

对吧，下面这个解析V-HTM。Right。就这一个。好，下面。嗯，解析V杠什么model是吧？好这一个好说一下，我们平常用那个class的时候，没有微观class啊。只有一个什么啊，冒号class，或者叫VB的class对不对，冒号class，但我们这里面为了能够去简单啊，别买。简单，我们用的是V-class，其实这个原生的view的语法，View里面没有这个语法。但是为了能够我们写起来更轻松，用的是这样一个语法。你不然的话，到时候咱要用它原生的语法的话，就会比较麻烦，写下来会更多的代码。

但其实这个里面呢，它本身并没有做太多事，你发现了吗？也就最终都叫谁去做的。你看是不是统一都调半的去做的，那也就是说我们需要看。具体的说，他如何来去解析，是不是得看B怎么做半打开。对吧，都跑到半程，这来来半里面这一个得到。更新节点的什么函数？Never know。呃，这个函数是不是update里面的某一个函数。那根据什么来得到？大家首先要观察update里面函数，它有一个特别的名称。左边有就类似于我们的指令名是吧，右边是不是统一的都叫update，那我这边就这么做的呀，这个是对应什么。指令名对吧，指令。

好，而这一个我们当前应该是个什么值。P。对吧，我们当然就是个text吧。好。得到这个函数以后，下面干嘛去，是不是调用的函数，这个检查就不用写了，就说检查它是不是有知，这个就没必要说了啊调用啊更新啊，调用函数。更新节点。对吧，让节点能够显示一个正确的数据吧。嗯。后面的这个是我们后面要讲的这个跟我们初始化显示没有太大关系，先暂时先放着，后面我们会专门说啊。Okay。好，但是在更新结论的时候，这里面有一个事情。这个是干嘛？大家想我要更新节点，是不是要对节点指定某个属性的什么值吧？

对不对，这个我们是不是已经确定了。就这一个根据什么来确定呢？它这个地方我们调用不同的函数，这个值是不太一样，这个名称不太一样，对不对？关于value从哪了呢。就value根据谁来确定呢？这里面有两个，一个是首先数据是不是在VF里面对吧，还有一个我要想得到数据，我我手里有个什么东西。这是什么呢？EP表达式expression的简写啊，OK，那也就是说这一句话是用来去根据表达式，我整体写一下这这个函数是干嘛啊就行了啊，就是得到啊从啊根据什么从从VM中。得到表达式，嗯，表达式所对应的什么？

值不就吗？能不能看到这个里面就涉及到一个问题啊，就涉及到一个非常重要的问题，就是这个表达式可能是多层的。对吧，但我们这里面就一层啊，这个细节呢，倒是没什么，不是比较关键的东西啊，是整体啊，需要知道整体流程。啊，你只要知道这个函数是在干，得到表达式所对应的值就OK了，那我们在调用这个函数的时候，我们调用这个函数最终对于我们当前来说找的是不是它呀。对吧，那最后就调用它就可以了啊，调用它最终我们的那个文本内容就会显示出来。是这么个事。好在整个里面来看一下。啊，在整个里面看下这里第二步啊，第二步第二步我们是要做什么去啊，整体的来说，我们第一步和第二第三步都是固定的，非常简单，主要说第二步初始化的过程到底做了哪些事情。

啊，我们整体要做的事情就是对所有层次的子节点。进行递归的编译处理吧。那关键是有哪些需要处理的东西了，整体有两种，一种是大括号表达式，这里面写一下叫大括号表达式，嗯。卡死了。啊，大挂表的是啊，文本节点进行解析，还有一个呢，是对元素节点的什么指令进行解析。啊，但是呢，这个里面具体的我们还没讲对吧，你只要知道重点我们有两个方面那好了。

看一下这个，看一下这个。现在我们的重点是不是要整他呀，啊，等他。那他啊，我们要去做什么呢？你就想着就以我们这个为例啊，大家看到我们现在当前的这个。就这个。就他是吧。啊，更准确的是说是他。对不对，懂不懂，这是文本节点嘛。好，看到我这里面写出来三步啊，重要的。我们要根据一个正则对象呢来去匹配出表达式字符串。最终我们对我们当下来说，匹配到的得的是什么？Name，对，其实非常简单就得到了name，那但是首先你得确定确实是一个表达式对不对，确实是个大块表达式，我就解说表达式字符串好下面。你有了这个类目是为了得到什么呢？

你等你找，为什么要找出name？因为你想得到表达式所对应的值吧。能不能，那下一步从date中取出表达式所对应的什么属性值，这能取吧，能取，取到值以后，最终这个值是不是要显示出来？那显示出来。设置到节点的哪个地方去才能显示出来呀。对T的content。其实核心的倒是。很简单一个事情，什么意思呢？大家想啊，我这是一个文本节点呢，对吧。那大家想想这个文本节点。第一步，把谁取出来？Name取帅。对吧，第二步根据这个内得到它对应的什么value，这是第二步吧，这都能做对不对，第三步。

把这个值塞到节点里面的什么属性，T的什么content属性就完了，你说这么简单的事，他还做那么多干嘛呀？你要想想，他不仅干这一件事情，对不？他干别的相关的东西。而且整合在一起去做。啊，如果就仅仅做这一件事情，那肯定几条鱼就搞定了。啊，OK。其他的一些遍历查找啊，大家要知道整体我们说的就是这个表达式，最终需要这么三步的解析就可以了。呃，你要跟人说的，就说说这三步就可以。也就一个大挂表的是如何显示出来？这个说应该能说吧，我不需要大家去说那么详细的一个流程，但这三步是应该可以说出来的。是对着说嘛，你可以举例子，我假设有一个P啊是吧，我要显示内。

你用一个白纸比上句话说就行啊，第一步像我这样说就差不多了，第一步取出类，接着根据name取出它对应的value，有了value后设置到。节点的text里面去就可以了。这是这个。