55_尚硅谷_Vue_源码分析_模板解析_一般指令

嗯，把它做完，咱今天就差不多了。来，再去写一个小例子。呃，把那个引路来了。这个。好，我们来写一点东西，先来个div，来个井号。好，我们一共会写几个指令，说一下P标签啊，有一个V杠的。懂不懂啊，我这个里面呢，需要去写一个特别的熟悉啊，写一个特别的熟悉啊，比如说message，但是message比较特别，它是个A标签。可以吧啊，我就写个百度吧啊hif等于TDB3W点百度点。com可以吧？好，下面我来写一下这个直接写什么message好我再写个指令叫V-HT吗。

能看到吧，好，除了这个啊，还有一个T标签，我来写个V-class。可以吧，好，我看class呢，我这里面写一个写一个写一个my class，随便写一个啊来这个my class是不是就是个变量了。能不能看懂，那我就把这个放在date里面吧，可以吧，好，那这个里面呢，我假设写一个写个A啊，写AA吧，那也就是说这个AA是个类名呗，那这个类名我得什么，是不是在上面用style来定义一下点AA。对不对，好，我不做太特别的。

啊。也就是说这一个啊，我就写一个。元宵节快乐，元宵快乐不快乐是吧，好。能看到吧，啊OK，好，现在来说我们暂时研究的是啊，这样三个那个VGA model后面再说啊，因为它双向数据管定是我们后面讲的一个东西啊，先看这三个来先来句这个不要了，这个就message就不用了，是吧，给它去掉打开一下看一下。所以来说这个V杠。Text和vega htm是不是正常显示了，没问题，现在这个颜色是不是也有说明样式起作用了嘛，对吧，那效果已经有了。

效果有的，下一步我们就是要去先调试着看一下sources。找到compare，把我们这些先都干了。对吧，找到我们刚才的那个位置，大家看啊，只现在只需要找一个位置啊，哪个位置呢。啊，我们的那个事件指令，指令判断的下一步在哪啊，稍微的过一下就在这。能不能看到，也就是说在这里面。对吧，我们现在没有时间之力吗？没有，那我现在问大家，这一个断点会过来几次。看什么几次，三次就看我的指令属性有几个对吧，所以我一共写了三个呀啊OK。好，这是来我们来看一下是不是这样的。

刷一下，这不过来一次吗？再一次，再一次没了吧，能不能看懂，好当然我们得去看一下他到底怎么做的，其实这个是很简单了啊，因为整个流程咱前面已经走的差不多了，好我们来看一下它那这一个方法现在解析的，看它是哪个指令。是V-T的那个指定属性，就是对应的是指定就是text。他这啥意思哟。大家看着这一个方法是不是用来解析指令去的啊，我们先来看一下，你说现在啊，我们的这一个方法v can text，那它最终调用的是哪个方法呢？啊，看到哪个第几个，应该第一个，我们自己要先推测，推测什么意思啊，我在这打个断点，我马上点下他，如果他能过来，那说明我的推测是对的。

这个能弄吗？啊OK，而且我们稍微的看一下它大家看到。这个是我的一个节点。美女是吧？OK，你是这个P先吗？能不懂这一个是我的VM，这是我的一个表达式message嘛。不就他吗，对吧，好，我们来看一下是不是我们想要手里。过来了吧。对吧，那过了这一个办的最终是不是调用的，肯定就是这个办啊，这里面有一个专门的办的话绑定的方法，对吧，而这个摆定方法来过来一下。它是不是会调用某一个更新的函数，那会调用谁了，我们要自己推测一下。哪个是不是应该是它能不能看懂，而调用T之前，它是不是要传过来节点，节点好说，但是它是不是要传来值，那也就是说在传之前，它是不是先要把值取到来看一下。

大家看啊，在他去执行之前，是不是取了一下值，其实这个咱前面看过。能不能好，我再点开它应该进入text update。了解吧，啊，OK，最终是不是负了一个更新的这个节点。好又来了，那现在对应的指令是哪个，是那个HTML那个指令属性呢？好，那此时啊，此时它会去调用这里面哪个方法啊，这个comp u条里面是不是这一个。能不能我们来推测一下，看是不是轴里？对的吧，啊对的解析的就是一个那个SK嘛，好，下面最终都会叫谁band。

对吧，而这个半是不是会调用一个更新的函数，那更新的函数调哪一个是不是HT塔，那我就在这打个观点。是吧，都理都对吧，都对，很好，下面来再来一个。没干。那最终它会去调用我的工具对象的，哎，不是这个是吧。哪个这个。对，不好走一把走你。啊，OK，是不是class，而里面去掉什么band，而B里面最终调用up里面的哪一个方法了class？看到吗？它这个稍微写的有点小麻烦啊，我们到时候可以简化一下，它为什么会先去取原有的class name呢。

大家要知道啊，有一个事情就是我除了写动态的class，我还可以写什么静态的class可以写的吧？可以写，比如说我有一个BB。可不可以可以，那也就是说我写了BB啊，假设我这地方再来一个点BB啊，OK，哪一个方size比如说等于30PX，这个比较大吧，那一说是不是这个BB也会起效果呀。这两个应该是个合并的效果吧。那如何能形成一个合并的效果呢？对不对，那这个时候就要需要去先去读class name。但是这个一定有字吧，那也不一定，说白了我可能没有指定。对不，这个就有一个判断的问题啊，有和没有，中间那个就有一个概念是叫空格，等会我可以这个写法其实还是有点小麻烦，可以再简化一下。

你只需要知道我们现在是在去更新哪个属性去。怎么了？是不是class name这样一个属性对吧？啊OK。后面就没了，最终是不是显出来了。先看着吧。好。来现在呢，我整个过程中打了很多锻炼啊，我现在要说另外一个条试，就是我现在想一次性过去。怎么办呢？对，我想一次性过去，你看现在现在没办法一次性过去，我有很多断点，对吧，得一个一个过。我想一次性全部过去，但是呢，我老师说那你把断点都去掉呗，我又不想把断点给它一个一个勾掉，这里面有一个这样的一个操作。干嘛了，走一下。经过断点了吗？没有，这这个端点没停吗？对不对，能看到吗？这是灰色的，这是啥意思？大家觉得啊，让这个断点临时失效。

所以说这样跟勾选有区别吗？当然有区别，就我还想保持这个断点，但某一个时刻，哎，这个时候我不想这个断点拦截我，对吧，我想一下子过去等会啊，过一会我又想把它打开。那你打开。懂不懂，现在我是不是已经看到效果了，那譬如说我看到效果，我又想调，那你继续呗。那么看到啊，这个有时候对于真实的项目调试是非常有用的，你要不操作它就是会浪费更多的时间去调。说白了就用来节省时间的嘛。啊，你一个跑也是没问题的，但是临时的让它失效，能够提高你调试的一个效率。好，这里面我就跟大家说了，其实用来用去这五个这个的用的少。

重点是这四个。嗯，这一个咱基我基本上都不太用，这个是整个，呃，在异常的时候暂停。啊，用来用去最多的这四个，希望大家能掌握。但是呢，这个你得练，你不能说就听我讲一下，你最后就会了，不太可能，因为你上去你站点都不知道打到哪里，你得试，你得试，你就不断的试，可以你先参照我的去学的去操作操作你试就会了。就调试这个东西吧，你只要会了这门技巧，你就掌握了。啊，什么时候你都可以用。好，这是这个来下面呢，我们在这里面写一些简单的一个注释，再写作业，我们先看一下简单的。把这个过一下啊。其实呢，跟上面的有点类似，这个地方先要得到子粒名要得到吧。

指令名，譬如说我们指定名有哪些啊？有T的，有HTM，还有什么，有一个class，还得到对应的是不是指令值，也就是表达式啊，那表达式我们都写的是什么？Message写过吧？诶诶，怎么卡在这里不动了，还有什么啊，My class是吧？啊，OK，这不都是表达式吗？好，接着从date中。根据表达式得到对应的什么值？也是message是不是有个值？这个my class是不是有个值都有吧？好，得到值以后，最终的目标是把值设置到子我们的节点的或者元素节点的某一个属性上面。那到底是哪个属性呢？这有一个什么对应关系？比如说如果你解析用的指令属性是这个，或者说你的指令名叫text。

那对应的是不是t contain，那如果你指令名是HT嘛，对应的什么in the h对吗？如果你对应的是class，诶，这里面有问题，不叫class属性，叫什么class name对吧？是class name属性。这个能不能懂啊OK。最终要给这一个属性，要确定这个属性以后，最终把那个表达式的值设置到对应的什么属性上，就有一个对应关系的，最后要什么移除元素的指定属性。其实这个流程并不复杂，你要自己稍微的要研究一下，你自己根据实际情况比划一下啊。好，我们把那个注释稍微写写，这注释没多少了，把它写一写啊，我们找到我们的这个位置。

编译编译这个地方来找到我们的普通指令或者叫一般指令，对吧，这个如果是一般指令，我们是不是要调用这个编译的工具对象去编译这个指令属性。编译。指定属性啊，或者叫编译指令都行啊，好来最终这个地方是不是要找对应的函数啊，那我们要看这些函数都有哪些。啊，刚才其实咱都写过了。这一个是解析谁的text。是吧，这个用来去解析。V-HTM，下面这个我们还没有讲，放着下面这一个。解析什么？没class是吧？其实本质上view里面有这个语法吗？没有，只是我们为了简化就设计了这样一个语法。

好，这最终他们三都会调用它吧，都会调用它啊，而最终呢，就确定是哪个根新的函数吧。那根函数下面好几个。好，这上面两个都很简单，就说一下它啊，说下它我把不不写这个啊，太费劲了，来说一下。也就是说实际上简单来说啊，我不写它那么复杂了，我简单简化一下写，这是静态的class得到了值吧，可能有，也可能什么没有值。那好了，那这个里面就有一个space，什么意思。啊，大家想它如果是A，它得到的值是A，那我我跟他之间是不是要空格隔开才行呢。我到底要不要空格，看什么呢？

就是看他有没有子啊。能不懂啊，OK，好。而且这个关键是关键有个问题啊，如果我没有指定class，它的这个值是空还是什么。如果空串就特别好，就特别爽，嗯，对吧，如果如果我没有指定class，它的结果，如果要空串，那就特别舒服，那就很好做。什么意思啊，如果空撞，那这个要空格吗？不用，那如果他有值。那就要这咋做。对吧，OK，其实就是要不要空格的问题呗，看到比如说这个class name有值吗？对吧，有值呢，那我的这个结果是不是它否则呢。是这样的吧，啊，就需要一个空格，你你要没空格，那两个名字就连在一起了。

那最后就不对了。简单来写是不是就是大家想想看，这是静态的啊，静态class的值，属性的值对吧？OK，这一个属性的值是不是跟我这个动态class的值要合并起来，当合并的中间可能有空格，也可能什么没有。相当于啊将啊那个静态class啊属性的值。与什么动态class的值进行什么合并后保存为新的版啊，设置为新的class属性值。这意思吧，值中间要注意可能需要什么空格，也可能不要。

快。就这么，其他的就都没什么了。啊，那我们来看一下啊，看一下，因为这个道理很多，那我就把这个A搞。看一下我们改了以后，诶有问题。是吧，是不是有问题啊，啊，说明我们刚才这个是不是有问题，那有问题的话，我们去需要需要去调啊，刚好是一个调试机，现在我该怎么调啊，现在咱要一起想一想啊，我我首先出问题的地方在哪里，可能出问题的地方，我刚才是不是肯定有一个推测呀，那譬如说啊，我我们刚才不就改这个出了问题吗。找到那个位置，在比较靠下的位置，是不是这一片位置。好，来啊，我先啊，这些断点我都不要了，咔嚓一下全部干掉得了是吧？重点就是这呗，是不是好，那我应该干嘛，打个锻炼呗。

具有针对性的调是吧，找到你认为可能出问题的位置，打成断点，接着什么。谁是不是好看一下啊？总理。得到了什么？BB没问题吧，没问题，好，而我们的这个value是什么？AA没问题是吧？好，那接着呢，我们是这么做的，我们现在的结果，这个是秘密。对吧？BB如果有值就是空格，否则来试一下没关系，看一下它的值是多少不就得了吗？哎。是不是有问题？有没有看到有问题啊，有问题我我的感觉就是明显不对嘛，我的感觉就是应该是优先级的问题导致的，估计是啊优先级导致的问题。

能不能看到。啊OK，我不管它，我现在我们现在啊，现在其实很明确，这个语法非常简单一个语法是吧，就是我用前面的加上这个后面的中间是不是可能是空算，也可能是空格呀，就这么简单一个语法，但结果跟我们想的结果是不太一样的吧。对不？所以我自然要去推测这里面这个位置有问题，别的地方没问题了，就这一条语，你知道调试它一个非常大的一个作用，就是将可能出问题的区域从一个比较大的区域。变得特别小，特别小，特别小，直到你发现为止。你只有缩小那个可疑区域，你才有可能找出来。啊，来看是不是刷新一下。先过去看一下效果是吧，啊OK。

你改了以后也不一定说一步一步调啊，你先看有没有效果，有效果说明改对了，对吧，要没有效果，我再一点一点调是不是可以啊，就这么个事啊。还是这个操纵服的优先级的问题导致的啊一个事情。BY。那整个我们这个一般指定的解析就这么一些东西了，刚才我们的这个整体流程也给大家说过了啊，这个也是大家需要清楚的，到时候能跟面试官自由的交流的东西。好行，那就这一部分就差不多了，那还剩下一点时间，大家自己搞一搞。