54_尚硅谷_Vue_源码分析_模板解析_事件指令

呃，下面我们要看的是指令解析，但指令解析呢，有有两种指令，一种叫事件指令，一种叫一般指令。啊，为什么区别看呢？因为事件指令解析和一般指令解析它做的事情完全不一样，所以我们要去区别去看，那我们先来看事件指令解析啊，这都不太难了，已经，嗯，找一个事件指令来把那个引路拿过来一下。把这引入部分拿过来，把这个都拿过来。好，写一段模板，Div应该有个ID叫test对吧？好，那这样啊，我有一个P标签，就是用来去显S的。

好，我这里有个button对吧，这个button呢，来一个啊，这个叫一个啊，不对啊，叫什么事件指令解析我也涉及到啊，就是。写一个什么呀，提示啊，来怎么加绑定监听。我们以前是不是简接写法，At可等于一个回函数吧，比如说数好，那这里面呢，我就不写简洁表达方式了，Me啊，那个on冒号这样的吧，好，那我应该去同时再去写一个MY，这里面应该有一个对应的啊，不是肯定叫show方法，好就alo一下name的值吧，怎写this，点一个name。

对吧，来，我们先来看一下效果行不行。点一下。可以吧，可以，那下面我们就要去看一下它是如何来实现的，那我们就要开始调试了。那这一次呢，我们先把前面的这些点都去掉，因为我们现在是看指令解析，那其实我们只需要找到对应的位置。啊，往下面翻一页，看到这里其实就要看他去。对吧，看这一个。那我现在问大家，这个里面会进来几次。嗯，来看一下啊，看一下我们的这个结构，我们的结构是这样子的。几次？看什么就进了几次，就看我有几个，我整个里面有几个标签呗，几次两次一个P标签。

一个八对吧，但P标签这次进来其实没什么太用，对不对，因为P标签没有没有指令属性啊，来试一下，现在我进来是T吧，我都不打算看了，我们直接来。现在是什么好，我们重点看button。那我现在应该怎么操作，是不是进入好。第一条语句干嘛的？得到所有的什么属性节点的尾数组是吧。九零，接着便利所有的属性节点吧。这个时候得应该在72行打个断点。点一下它对吧，好，下面一个来看，你看它得到的是哪个属性。是V-on冒号和立的一个属性吧，好属性名是不是就这个？

没问题吧，这不属性名吗？好了，他问我这一个属性名，它是不是一个。Direct什么意思？指令？说白了，当前这个属性是指令属性吗？怎么看？其实很简单，就看有没有V杠。比如说老师，我万一用简写了，这里不支持简写，因为我们现在是要研究它的一些特，这些语法，那些简写方式，要实现得写更多的代码。听懂吧，啊OK，我们就搞原生的原始的啊好，那我们当年是吗。你想想我们这个指令属性是不是就是一个指令属性嘛，其实这个方法非常的简单啊，大家如果觉得嗯不太懂，可以看一下，就看这个V杠。是不是在这个属性名里面，对不对，它的下标是不是等于零嘛，就最左边。

对吧。MV杠开头好点一下，它应该进入吧，这得到什么。是不是得到属性的值，而属性值本质上是个什么东西？EP是什么东西表达式？这个时候应该是谁，是不是秀啊，应该他吧，嗯，你一定要推测一下啊，自己在调试的过程中要推测是不是锈啊，啊没问题，好下面。说把那个属性名。截取从哪截下边为二开始截，那截到一个什么哟，我现在是这样一个串，从下边为二开截不截了这个吗。对不对。能不懂，好，那我们看一下是不是。

是的吧，是的，下一步问你的这一个指令是不是一个什么事间指令，现在终于得到指令名了，对吧？那怎么知道它是个事件指令呢？二冒号。我们来看一下。是不是按开头啊。能不能看懂啊没问题，那我们当前是不是是那就进入。对吧？好，那下面就是真正去处理事件指令的最关键的一条语句，它用到的是我们编译工具对象的一个什么event handler什么意思？事件处理或者叫事件处理器，对吧，那那我们应该点哪个按钮呢？是不是进入啊，哎啊有感觉了行。我们来看一下。啊，在看之前我们得想一想，这一个解析事件指令这个属性最终的目标是要做个什么事情？

是不是给这个button绑定对应的点击监听。要指定事件名吧，要指定回调函数吧？能不懂？好，我们来看一下是不是，其实这个事情并不难。好，首先这是这个几八吧，这个是VM，这个是表达式。这个是那个子令名对吧，子令名好了，他干一个什么事了，他说。把这个指令名通过冒号金什么分隔取到什么，第二个那得到的是什么，是不是世界名，也就世界类型对吧？好，这个必须得确定好，还一个。啊，大家看看他干嘛去了？这是干嘛啊？先先要确保你的配置里面配了什么message。

再从method里面，根据这个表达式的名称。渠道对应的什么？是不是毁掉函数？这是不是对应的事件处理的回调函数，那一五判断什么意思？你想想看，事件名和回调函数都有，是不是才能去绑定监听，有一个没有，我能做吗？不能。他们俩要都存在，我就做一件事情，干嘛去绑定事件监听对吧？这是一种通用的绑定事件鉴定的方式吧，我们平常可能绑定时间写安可立克对吧？但那种方式在这里面不太适用。啊，这种比较更通用一些，这是什么事件名，这是那个FNC的函数吧，诶为什么这么多呢？这有意思啊，也就是说绑定那个函数是那个我message里面那个函数吗？是FN吗？回调函数是F吗？不是，这里面就要说半的，它的一个作用半的。

首先来说，它返回的是一个新的函数。对吧，这个新函数有两个特点。第一个this被强制指定，为什么VM还有一个函数体的实现与原来的这个函数的实现是什么一模一样的？就函数整个定义都跟以前一模一样，只是Z被确定为谁VM。这个非常关键，要没有这个可能就不行了，如果它直接传一个FN，那我告诉你那个回调函数就不对，就不是因为我们在这里面是要取this点内。

对吧，那这个位置是谁，现在。是不是VM呀，但是但是你在想我们用的是原生的语法对吧，在原生语法里面，你想想看事件回调函数那个Z4VM吗？那肯定不是啦。他哪知道V对不对，但是我们这么简单的做一下，就调用一下什么，当然了。哎，这个this就被指定为VM了。那么呢，后面这个不用管它，主要是这两个对吧，就是补货的问题，好像是是吧。这两个啊。也就是说，最终的最终，我们解析事件指定属性要做的事情是什么？啊，给标签绑定什么监听毁掉对吧，只是说要指定什么东西，指定两个东西世界名还是什么回调函数。

那补充说明，回调函数里面指定的时候要给回调函数绑定什么Z是为随VM就为什么这个事情很简单，他就做的事情是比较固定的。比我们前面流程要短了很多。啊。来，那下面呢，我们就给他呢，稍微的写一些啊小的注释啊。来，回到我们的那个comp这边找到我们啊这里。对吧，哎，还在前面一点有东西把这个先搞一下compare这个。就是解析我们的编译我们的指令的一个函数，而这个函数最外围从这里开始。来这一条在干嘛呢，得到。

标签的所有什么属性节点啊，所有属性对吧？啊，这个类我就不说了啊，这个干嘛去。电力所有属性对吧，好，得到什么属性名，我们当前就是谁。V杠冒号。有没有看到好接着干嘛，判断是否是指令属性对吧，这个判断的条件其实非常简单，就是看什么V杠开头是不是对吧，啊是不是是。好，接着继续。得到属性值，而这个属性值本质就是谁。

就是表达式啊，对吧，那我们当前的值是什么，这是个表达式对吧？好，下面继续。得到什么？从那个属性名里面得到什么东西啊，从属性嗯，属性名中得到啊指令名对吧？而这个指令名当前是谁呢？On冒号可Li我们说过了，这整个不指令属性吗？这个V杠是不要的，对不对？我们的子离明是不是后面这一部分。On冒号。下面一个判断是否是吧，啊是否是事件指令。怎么判断呢？四不按开头就行对吧，冒号没关系，按开头就得了。

好，下面如果是，那我是不是去处理解析这个世界指令啊，解析时间指令。说白了，这才是真正解析的位置啊啊啊，解析处理事件之地啊，好，来看一下这里面传的都是什么，这是这个节点。这一个是VM，这个是表达式，而表达式是什么值秀对吧，而这一个是什么子令名，而子令名当前是一个什么值on冒号是吧。好，下面我们就要去看它，这很简单啊，这一个得到什么得到啊，事件类型啊，我们可能叫的比较多的是什么事件名对吧，其实是一个意思，那我们当前的结果是多少和。

对吧，好下面这个啊从啊配置中。得到。表达式所对应的回调函数对吧？函数啊，这个是不是就是事件回调函数啊，事件毁掉函数懂不懂？好，下面这什么意思？是不是如果都存在才能记住啊，如果都存在。这个时候就最终一步了，好吧，啊给啊节点实际上是本质上这个节点应该是元素节点对吧，绑定。指定事件名和回调函数的。

多M时间监听我强调一个，这就是一个原生的写法，对吧，多M时间监听能不懂，而且还强调一个这一个回调函数强制绑定了，强制啊，回调函数强制绑定Z为CVM。这就是我们想要的呀，对吧。有没有看到？嗯，到时就差不多了。嗯，OK，那也就是说我们这个地方来看一下。诶，找到我们的这个位置啊。这个就是在去解析啊，处理事件指令，而下面这一套是在干嘛。是不是一般指令，所以说一般指令是不是其他的一些指令。那好啦，还有最后一个。

这一个在干嘛。啊，移除什么指令属性，还记不记得我们那些指定属性，最终解析完了以后，在页面你根本看不见对不啊，也就是说你想去找大家可以审查一下，看一下，看看里面还有没有就很简单了。D里面啊V-on肯定有吗？没有，没有的，原因非常简单，为什么移除了。嗯，这就完了。那整体的咱再看一下事件指令它的一个解析的一个过程啊，其实还是比较简洁的，首先从指令名中取出世界名，我们当前世界名是什么？

是不是看对吧，好。根据指令的值，指令的值，指令属性的值是不是应该表达式中从MY设中得到对应的什么处理回到函数对象也就得到谁了。我们刚才是不是写了一个是写的是叫什么名字溴啊对很好啊，是这个溴啊溴函数下面给当前元素节点绑定什么实验啊监听这个实验监听指定了什么东西实间名和什么毁掉函数，而且是个原生的写法，对吧？啊OK，保定监听最后的最后你只解析完了以后干嘛移除指定属性。这个流程应该是啊，可以说出来的。

好，那这一部分呢，我就说到这里啊，后面呢，大家需要去看一看啊。