50_尚硅谷_Vue_源码分析_数据代理_debug

下面我们要去分析它的结果，这里面要讲一个用到一个非常重要的技巧。Debug调试。也就是说，大家去读别人的源码，读别人的代码，如果你就静态读，那太费劲了。那应该怎么去做呢？让它运行起来。最好是能够通过第八个调试的方式，你要研究某一个流程，很多代码，它要它的代码，譬如说几百行，上千行，那你要不动态的去运行这一个看那是它的背景，因为有很多里面有一些隐判断呢，有一些循环呢，你到底数据是多少，你在代码里面是看不到的吧。还其实很费劲。来，我们现在呢，就通过调试的方式来看一看。那调试的方式呢？啊，我们来去看一看，这个里面先切换到什么。Sources源码这一部分对吧，接着点到这里。大家知道调试最难的是什么吗？

人说老师我调试都不知道要干什么是吧，用的少，那至少说那说明你用过呀啊OK，第一个操作干嘛打断点。那，但最难的就是锻炼。等一下就是打。这不下面就要说嘛，OK，整个整个里面说第八个条是最最复杂的，其实最最有有意思的就是打断点，打到哪个位置，打几个断点对吧，什么时候打，其实这都是一个非常重要的问题啊，OK，没有为什么肯定要打，没有为什么你都要第八个条试，你不打断你怎么行呢？好，那关键就是现在我们要研究问题，我去哪打那里比较合适对吧，有一个相对合适的位置，相对合适位置没有一个绝对的啊。

那好了，譬如说举个例子，我在这里报告你。合不合适，我现在研究那个代理的实现是吧？啊数据代理的实现，我在32号打到那里，我刷一下。哎，停在这里了。是吧，那现在就是说我这样打着，我能去观察数据代理的实现吗。能不能？不能，为什么？就现在数据代理已经有了呀，这效果都已经产生了，我希望看到效果产生的原因的一个过程，对不对，过程已经。已经运行完成了。对吧，所以这个位置相对来说是不合适的。能不能懂那不合适，也就是说那就看你是晚了还是早了，对吧，很明显现在什么晚了。那晚呢，那就打到前面呗。能不能，我现在。

是不是要把它提前了，好把它提前，但是啊，你不能说是把那个断点打到这个里面啊，打到这个里面是打不上去的啊，是打到一条语句的开头。这整个是一条语句吧，整个是条语句，那前面就一条语句吗？我当然自然就达到26行了，那老师万一不是这种情况呢，那慢慢后面再看啊，一点一点的琢磨啊，好来刷一下。停在这了吧，那停在这了以后下面啊，打完断点以后，就是你刷新界面，最后呢，停在这个断点的位置。下一步的操作啊，就是一些断点的一些调试操作了。那这些按钮，首先大家得知道每个按钮都起的是个什么效果，我先把效果给大家简单的演示一下，先说这两个。啊，先说这两个，这个呢。如果你不清楚，你就别说啊，你完全瞎猜的就不要瞎说了。

OK，来这个它是它的作用是啊，尽量的把当前断点所管理的区域全部执行完。譬如我这个一点那就完成了。全部执行完了，为什么呢？因为我整个执行的过程中没有遇到一个道理。这个能懂吧，因为我现在就一个断点嘛，来再演示一下，譬如说我在这里又加个断点，请问。我点一下停到什么32号。那这两个例子就能说明我点它的一个作用是什么，对吧？OK，点它是尽量将当前断点执行完，但是呢，中间要碰到其他断点，那得什么是不是暂停啊，得暂停就这样一个是好。那当然，我现在只有一个断点啊，再来一次，大家一定要把这些操作基本操作都会啊。

好，那我现在点它合适吗？不合适吧，因为我点它完了，我啥也没看见，整个过程我都不知道。对吧，好，那就换别的呗。这一个是干嘛的。这个是进入函数去执行。能不懂我当前这条语句里面是不是有一个函数调用啊，因为另一个函数吗。就执行函数。那我点他会怎么着？是不是进入这个MM函数去看了诶。等一下啊。哦，应该这个不好意思啊，这个这个都不是这个什么意思啊，这个说说这个是记录这个，这一个呢，是执行完当前这一行的语句，进入什么呢？下一行就是单步执行。那没懂单步执行，那单步执行啊，我点一下。

合适吗？就我现在这种操作有，我能不能查查看出来那个代理的过程不能到了32行就不行了。听懂吧，所以这个也不行。好，下面这个。Step into。跳路对吧，进入。啊妯娌，你来看。什么意思，这个应该能看懂吧，啊进入函数执行，那这个时候说白了就是说的意思，我们看了这么久啊，我们发现了一个事情，就是这个函数叫内部是不是实现了数据代理。对吧，所以我自然要进去，你说老师这么多选择，我到时候选择哪个我哪知道，其实啊，你只要有一个基本掌握了这个调试技巧，它基本上都差不多啊，或者说你第一个操作错了，那你就要进行别的操作试一试了啊，操作次数多了自然就有感觉了。

好来下面下面就要说另外一个事情啊，诶，这个这个放在这边啊，让它让它形成。就这个效果，怎么这个摆放的那个位置不太好。这种这种感觉好一点。这样放着会更加好看一点。来说一说，那现在现在有个问题，我要说一个问题，我现在运行在哪呢？我不知道了。我觉得当前程序运行到哪哪一行了，因为我刚才切来切去，最后不知道运行到哪个位置了。那我是不是得找到那个位置人说那找呗，那就点开哦，也能找到，主要是现在我这个比较简单，就打开了，是不是一个文件呢，两个文件对不对，那如果我打开的文件特别多。那有时候你找的那个锻炼位置都挺费劲的。是吧，怎么样快速定位到啊，我当前断点暂停的程序暂停的位置了。

右下角右右边右边。啊，这个位置点一下。这个箭头就代表我当前运行到哪个函数了，MVVM这个函数。能看到吧，而且呢，还能看出来是哪个文件第几行看到了啊，OK，那这个函数在哪里调的它了。谁掉的他呢，我想回回去来看一下这个这个这个你自己不能，那靠记忆肯定是不行的，因为可能有很多等下他。看懂了吗？啊，这个叫一个调用站，也就是函数调用的一个，一次调用的一个一个站的一个对战的一个保存的一个记录啊，这个非常有用。啊，后面我们慢慢接触啊，好来继续，现在我又这个应该能知道了。

这个是记录这个什么出去，相当于把这个函数体全部执行完，给它执行出去能懂不啊，OK，你看我走一下走。Never went off。啊，那函数体它是刚才那个MV函数体执行完了，那这样操作行吗？也不行，因为刚才的过程都没看。对不对，我白进去了，我进去是不是又出来了，不能，所以来继续啊，那就说现在这四个按钮。咱都操作了啊，后面的再说。来先什么记录？接着按哪个按钮。第几个？这是第一个，这是第二个，这是第三个，这是第四个，咱就找四个。其实这个是用的最多的，对吧，这个就仔细的看。一行一行看，一条一条语句的看，在单步跳过啊，来试一下。

能看到吧，好，这个里面我选是什么。是不是那个配置对象一上来他把配置对象给了是么。是不是传到this里面去了啊，This是谁？谁你得有一个六的一个对象，这个一听别人就不知道你六的对象是谁啊是谁啊，那也不太好，MVM那就说他。嗯，就是VM，我们命了一个名字嘛，为了更好的交流，我们是不是说了一个名字叫VM对吧，这样比较好交流啊，比如说this，就是VM，是不是将这个配置对象存在什么VM里面去了，接着这是在取什么呀，是不是取对。接着把date存在什么，是不是VM里面也是同时还用什么一个变量，是不是存在一下。

能看懂吗？这个来好下一步。存谁这意思，就存BM呗，啊这个也没什么问题是吧？好，前面的这些都是准备工作，都没有去做什么数据代理，下面这段话。这条语句是用来实现数据代理的，你看它做什么事啊，诶，这个语法刚才学过。这是干嘛？得到date对象中所有属性组成的什么数组，属性零组成数组吧，属性名组成的数组，接着去看面去变例，那这个K是什么？某一个是不是属性名？那本质上对于当咱当前的情况有几个就一个，说白了现在name k是谁对name。对吧，那好啦。

那我现在呢，想直接看第，你就说这些东西的执行，我都不想看，我就想看这条语句吧，关键。对不，那现在啊，现在有个调试技巧非常关键，我现在点它。合适吗？不合适，过去了啥也看不见，我点它合适吗？点它是执行完当前这条鱼合适吗？不合适，我点他了进入，那这个时候就有个问题，我是不是掉了好多函数，剩函数我想进去吗？不想分一起，我也不想进去，我就想进入这个什么方形里面。怎么办呢？加断点有两种，两种情况，一种是运行之前加断点。再一个运行的过程中加锻炼。什么意思，我现在就想运行到第九行呢。对吧，啊，现在我不加断点，我只点哪个都不合适。

能不能，所以。很简单，在这加个段里能不能看到接着了。你无论是点第一个还是点第二个都可以。你想嘛，就是点这一个可不可以可以，因为他的想法是要把当前语句执行完。但是你要碰到锻炼，他能过去吗？不能。能看到吧，啊OK，当然左边第一个也可以吧。也可以。啊，这里面我们就说了两种加锻炼的方式啊，一种是执行之前，一种是执行的过程中。好，现在K是谁？现在还没有去做数据代理的实现吧，还没有做重点，诶这个方法来了，密点下划线pro pro幂是谁？VM对吧？什么意思？代理就是代理的意思，那也就是说这条语句是对指定的属性实现代理吧，说白了就是跟这个类目实现代理。

对吧，那下面我们点它行吗。行不行？我点它这个，这这条整个鱼就过去了，我都没看到它到底怎么实现的，那我点它干什么。那更不合适了，那直接就完了，对吧，点他了，哎，这个可以是吧，啊，这是一种方式，有的老师我就想点他或者他。You啊，又想看到。里面怎么做的？我该怎么做呢？对，加个断点，诶这个里面大家看到圆形里面是不是有这个方法呀？啊，当然你可以在这是吗。加个断点是吧，接着点它看到吧，其实其实这种我想看某一个中间某个方法，我经常会这么做，就是这个函数在这加个断点，马上一点，这样比较直接啊过来了。

看到不，而且大家看到现在的整个函数调用了一个流程，这是全局的。懂不懂，接着是不是调用了什么。六到的MVM是不是MVM里面去，最终是不是触发了这个回调函数执行，这个是匿名的意思，能懂吧，下面在这个函数里面调用了这个什么proxy。能看到吧，好，也就是说下面这篇代码是不是实现代理最最关键的一些代码，前面都是准备工作，好this传到命面，Z是谁？VM还是VM，能不懂啊，这个VM吗？不是MVM是VM的一个实例。好，那也说，其实最最重要的就这个，那也就是说数据代理是通过哪个技术实现的。

DeFine property。对吧，也就是说我们他现在做的事情就是给组组建我们的VM对象，VM对象是不是添加属性。只是我们是不是通过数据描述符的方式来添加？这K谁？好看一下第一个就说什么意思，你这个定义不要再修改了。能懂不，也就是说外部他要他要自为处，那外部可以修改的。这样就有风险，能不能我定好了以后不能再修改了。他防止别人恶意修改好这个。可以枚举，其实前面的都不是最最关键的，最最关键的是下面两条。Get和什么get什么时候掉？

你说一个说一个表达，说一个情况它就掉了啊，我们去读，通过这种方式vm.name去读这个结果，那它就调用get。去哪取数，那不就date中取对应的属性值吗？试一试吧。那sat什么时候掉啊啊对，我们通过VM.m等于一个值，比如说叉叉叉随便啊，能看到吧，我修改了这个内的属性值，它标S。传过来。六、value是谁？新的叉叉对不对，好，而数据最终保存到哪去了里面。那也就是说，其实数据带进的实现并不复杂嘛，这不就是这样一个语法吗？最最关键的。啊，为什么前面我说那个DeFine property，这个是最最关键的一个语法，是因为数据代理就用了它。

来去实现的。好来啊，那我现在问问一些问题啊，大家看啊。我来这里打个断点，在这里打个断点啊，也就说get塔下都打断点了吧，好，我还要去一个地方打个点，我在这打个断点。也就是说现在我又加了三个断点是吧，我来做一个操作。我来做一个操作，怎么操作呢，点它。点他。好，现在请问。会停在哪个断点上面。二。啊，这里有三个端点，再看一下啊，有我们这个里面的28行，31行，一个get，一个set是吧，还有我们这个页面里面的这个32行。停在哪了？会停在32号。

为什么会停在这个非常关键啊，如果你能看懂，看出来三沙海，那这个是一个根本一点问题都没有了，那如果你看不出来，那还有点小问题啊，我们这个get，我们刚才说过是要去读属性值，也在执行它的时候才会调用，对不对，但是我在这之前加了一个什么断点。能懂不啊，这个能懂，也就是说我要不去读，不去更新我的这个get set会执行吗？不会。能弄吧，好。来，现在我们来看一看，看看是不是在哪啊。走，你。完了，现在出问题了，出问题是因为我调试时间太长了，他已经他已经承受不起。这么长时间的一个操作了，那只能重新再来了啊，有的时候他也会出这样的问题啊，你不用。

不能强迫他一直都是好的，那我们就快速的过来，对吧。呃，点一下。啊，再点一下咱不都有断点吗？看到吧，好手底。能不能看到好来这样我们就进入了32行，那进入32行，我是不是读VM点好，现在我再点它。看。是不是进入get呀，这个能不能懂，进入get是不是我们就会得到这个数据，大家看看。能看到吗？又回来了，看到吧，回来以后接着我一输出，是不是得到结果了，好，下面。我接着点它。或者就点他吧，我就点这个。会怎么样呢？会进入34号对吧，不会进入34号，你就现在在33号吗？正常情况下是不会进入34啊，但是呢，现在不会，现在会进入什么呢？Set里面。

你要有这个推测，你要推测不出来，那说明你这个整个过程还不太熟练啊，看一下手里能不能看到啊，OK，那也就是说我给这个date里面的这个给VM。去附一个新的值的时候，其实数据会保存到哪去data里面去。是不是过来了，能看到吧啊OK，就在后面，我们去取数据，那取数据估计又会进入那个是不是get啊，能看到吧啊没了。但是我们通过他取数据会进入get吗？会还是不会，不会。看到了，我们现在是不是进入这样。娶了个他呀，OK？

好，那整个流程通过调试的方式，咱就分析的差不多了。