59_尚硅谷_Vue_源码分析_数据绑定_Dep与Watcher之间的关系2

那下面我们要看一下那个他们之间的关系如何来建立。我说一下建立关系的位置啊。我直接就打开的。在这个啊compare，嗯，我打开一下这里啊。这里面我们在对数据进行解释的时候提供了get和set。如果就从数据解释来看，需要set就够了，就get要不要都没关系。其实。但sat呢，有，前面在访问Y之前做了这样一件事情。这个代码就是用来去建立啊deep与我之间关系的代码。那下面呢，我就会在这里打个断点，我们来看一下啊。到底什么时候会进来啊？我是在衣服里面去打断你啊。

来，把其他锻炼先都干掉。找到我们的那个observer。找到那个get，嗯，就在26号打到那里。刷一下再说。此时还处在初始化的阶段嘛，因为我根本还没做更新嘛，是吧，好。这个时候已经进来了，这个时候这一个debug的这个调试功能非常的有用，就是这个。这个调用站。前面的代码是不是都执行过了？如果没有这个工具，我根本就不知道他怎么来的。听懂吧，我前面掉过水啊，我都不知道，但是有了这个工具就很好，我们可以往回推。看他在做什么啊，我们先来看一下。这个这当前这条26行是谁导致调用的啊。

是我们在这里面去获取。从那个VM获取表达式的值吧。获取表达式的值来看一下它啊，这个还是在这里get。再缓回退，诶到达这里来了。那也就是说这个里面，这不是在六会掉条代码吗？如果你再不熟，没关系，我们继续往前推。来到哪里了？办这个办的什么时候执行呢？是不是解析模板的时候执行。啊，解析编译模板的时候自信，而且还能看得到，甚至可以看到当前我们解析的是谁都可以看得到。啊。整个截面的过程我们是都可以去看的。甚可以放到最最前面去。

啊，一直到你看到到哪里。MVM最外面，最外面。这个功能其实非常非常有用，对于我们调试其实现在看啊，应该是掉了十几层了。啊，那整体来说一下啊，整体啊来说一下，就从这里来说，我们当前。去建立关系发生在什么时候了？发生在是不是创建我起的时候，而创建我是在什么时候呢？是去我们去解析模板的时候啊，为什么是这样的？看下图，又回过来看图。啊，建立关系就在这样一个。对吧，那建立关系我们说是建立Di对象以什么。Watch对象之间的关系。那我要问你这个对象是不是创建肯定有先后啊。是吧，有一个先肯定有一个后的，那现在我们要想一想，先要想想谁先谁后。

啊，大家看啊地是在做它的时候创建的吧，做完它了以后是不是才创建comp，那先创建什么呀。Deep吧。因为deep看一下，大家看一下这段，看一下MVM。也就是说，地是在这条语句里面创建的。这不搞数据劫持去了吗？对吧？在数据劫持内部对每一个属性进行劫持的过程中，是不是要创建地方，而此时。我去解析模板了吗？还没有，我解析模板不下一条语句吗？对吧，也就是说我们创建一个编译对象是干嘛去的啊解析模板。对吧，而我去创建它这个调用，它是干嘛去的。

对date中所有层次的什么属性实现什么啊，通过数据劫持。啊，OK，结实实现什么数据绑定能不懂啊，最终去实现数据绑定啊，OK，好。那也就是说这个里面啊，刚才说过了，这个内部是不是会创建地方，而下面这个内部会创建什么。我想。那谁先谁后是不是就明确了呀？对不，因为这些代码都是在主线程执行的啊，这些代码都在主线上执行的好。来，回到我们的这里来啊。嗯。我们要找到我们刚才写的这个代码啊，这里来就在这啊在这里。

呃，有一个先后关系以后啊，有一个先后关系后，下面我们就要看诶这个。那也就是说他有他先。太后对吧，那你说建立关系什么时候建立。是创建地的时候建立，还是创建我的时候建立？先创建的地，你说创建地是能建立关系吗？不能呢，他怎么建立关系呢？为什么不来？拖起都没产生？那怎么鉴定呢，对吧，通过实际效果来看。是创建我的内部就会去建立关系，你看这不是在创建我吗？调用这个物函数是不是创建体了，那创建我体的内部。就会调用这个get，调用这个get最终是不是获取表达式的值，获取表达式的值是不是会读取某一个属性的值。

你读表达式的值，肯定属性值肯定要取嘛，你是取属性值嘛，那一旦取属性值就会导致属性的什么方法就用get。能看懂吧，那GET1调用。那此时我们来看一下它，那现在我怎么样看它是怎么建立关系的了，是不是要进入。能不懂？好，现在他写的是deep target，看target是。他给的是谁，What？也就是说我们说这个deep当前啊，大家想想当前是不是要解析某一个，解析某一个表达式啊，对不？此时要去决定每一个deep与对应的我起之间的关系，这当前某一个我，这是一个deep，这当前是个deep，这是地上的一个静态属性嘛，应该是就在这里。

最先的值是什么？那那现在为什么有值了呢？其实你再看一下这里。来啊。看下这他在获取之前，他先做了一件事情，说什么事？Deep点等于this this是谁，What？是不是当前的watcher，那也就是说它要将当前的watch是不是关联到对应的地上去。是不是，而这个get啊，这个里面就会导致于get调用。他不就整这个事情去了吗？但还没到最终代码，那也就是说我问大家。我现在一点会跑到哪个文件里面去。我这么一点是进入这个方法调用吗。

会进入了哪个文件，那点target是谁，Target的我。能看到不来看到我们走一把走。是我写好这个里面他写的很多啊，其实这个大家都不用看啊，看他能费脑筋了，现在实际上就去建立关系的，我们说他们之间的关系是什么样的关系。多对多的关系是吧，这两个方向是不是都要建立关系好，他挺有意思的啊，他一上来先有一个判断，看判断什么啊，判断这个deep ids。啊，里面有没有这个地的什么ID这样一个属性，那也就是说这个地ids的属性名是什么。应该是什么？应该是一个什么样的值？

这看不出来吗？你想想看，就看这个是个什么样的字呗，数字对很好一些数值，012345。或者说你可以先不看，你看下面两个。啊，你看下面两个啊，先看这个吧，这个比较好懂一些，当前water里面是不是有一个地盘DS。啊，属性名是什么。苏学明。Deep的ID吧，那属性值呢？是什么第一步，那也就是说我们回到这里来。回到这里来，看到啊，看到我们前面说过，我小里面是不是有一个deep ids。里面是个容器吧，容器对象里面放的怎么放的，是不是是一个属性名是什么deep的ID。对不对，而值是什么地。

能看到吧，那也就是说啊，也就是说我们将deep保存到了什么，What里面是不是一个是。将deep保存到里面来了，那下面一个事情看这里这个。这。这干嘛去Z是谁？我想我想听到哪去deep里面去，好来看一下啊，那前面的这个是用来干嘛的，是用来防止被反复的建立关系。也就是说我们下面最后一句话，是不是将deep放到这个deeps ids里面去，在放之前他先什么判断一下是否已经什么存在，那如果不存在，在家，那如果已经存在了，说明什么？关系已经什么建立过了，你有必要反复建立吗？没有。

好来，我们来看一下，这次呢，应该要进来，你看一下我们地ids现在是什么，现在诶已经。大家看到前面已经已经是不是有一个了，有一个什么，有一个地了，对应的ID是零，ID是零，应该是对应谁呀，对应最外层那个name吧。对不对，应最外层内好了，走一把。这说明什么，已经进入了，那这样不好啊，这样不好，我们先看最先的啊，把它的这些，我们最好是看到第一次的效果会比较好一些，把这个都干了。来现在呢，我们就是去看一个东西，就看这一个。我里面他们这个关系。点到这里啊，别的地方都不点，点太多了不太好啊，我们就让他过来。过来了吧，好，过来以后先看一下。

相当于里面是个什么空的，什么都没有吧，什么都没有啊，而我们当前将要被处理的这个是谁？对吧，能不能进去，能不能能啊能进去，而且你要知道这个还是这个当前这个我创建我的时候出的啊走你进来好，下面就建立关系吧，建立关系两个方向是不是都要建立。两个方向都进，首先是将watch添加到什么deep里面去啊，Deep里面去，那这个方法里面再怎么做的呢？其实非常简单，我们可以过去看一下。其实非常非常简单，就是this时间，时间什么push是不是添加到数组里面去。当前这个数组里面有东西吗？没有吧，没有好，那没有，那我一添加有了吗？有了。

是不是有了一个我小，有了一个我小，而且我的这个小间是哪个表达式的name是不是看得很清楚啊？啊，OK，好，没问题。来继续。下面呢？刚才是把watch放到地里去。这一次。啊，这一次是干什么事？将deep放到什么what里面反过来的，也就是说，现在你看到deep is有数据吗？没有好，我一走。有了没有有了，而且这个地ID是零，对应的是谁？外最外层内吧，啊外层的内没问题吧，没问题，好行那没问题，那也就是说现在啊，我们的这一个搞了下面是不是还有他们呢，还有这一个对不对啊，其实我们甚至可以啊，后面我们还可以多写几个，先把这个简单的先搞了，我们再复杂一点啊，现在还不够复杂啊，继续。

再走一把，现在是不是又过来了，又过来我们先看一下当前这个地步。还是谁零对吧，还是零，接着我们的这一个里面。T ids里面。还没有数据是吧？啊没有数据，那也就说当前的watcher，大家看下走，你能听到吧，其实现在要说一下现在的这个watcher，现在的这个watcher是谁。是这个我想对应谁对应它。能懂不对应它。能看到吧，对他好啦。来接着我去做一个添加，我们来直接我就过来了啊，我们来看一下现在啊，现在我的deep里面关联了几个我。几个两个。

为什么是两个？因为我们两个表达式用的是同一个属性叫什么？Name。看懂吗？我们两个不同的表达式。两就两个表达式，用到的是同一个什么属性？对不对，那同一个属性是不是对应同一个什么。同一个属性对应同一个什么地，能不能看到啊，同一个属性对应同一个地，好了接着走你。下面我的这一个啊，我的当前的这个water里面啊的这个deep is里面只有几个地方一个。看懂了吧，为什么只有一个啊，为什么只有也就只对应一个地。什么时候只对应一个地方，因为我就是一层的表达式啊。

懂吗？一个，这是一个窝吧，一个表达式就是一个窝。一个我我现在是不是对应一个地方。为什么这一个。因为我是什么一层。对吧，然后我们可以改一改啊好，那后面是不是继续可以。啊，又来了是吧，又来以后我们在运行之前先来看一下当前的啊，还是可以进来是吧，还是可以进来说明啊，又要建立新的关系是吧？我们来看一下当前的deep里面。有几个外向？两个这个低保是每个属性对应的低保。你一定要知道哪个属性对应地方哪个name对吧，零嘛，这不name吗。现在暂时有几个。两个，两个是不是就两个表达式用到了name。那下面再来加一个了。

几个了，三个了吧。能看到吧，啊三个了，那三个了以后啊，三个以后来下面这个里面。说明当前是一个新的，一个watch，当前是一个新的，我里面什么都没有吧，好加一个。那也就是说现在我的我里面关联了几个地方。一个地，最后是不是也只有一个？因为我们是一个什么一层的表达式。对吧，是一个单层的表达式。这能不能看到，嗯。好。那整个就完成了，能看到吧。好，那整个完结以后啊，整个完结以后，后面我是有一个什么更新，其实后面就很简单了。啊，后面的事情就是很顺的一个事，然后关系都已经建立好了，等到我做更新的时候啊，我只需要去来点一下，因为我更新内了嘛。

好啊，我更新内容，我会大家看看这个图。我会通知我对应的地吧。会吧，会，我会通知我对应的我吧，好，我现在问大家。会通知几个，我想。也就是说我的这个内所对应的地关联了几个，我起呀，为什么是三个？因为我的模板里面有三个表达式用到了同一个这个name。对不对。是这意思吧，好，那我们来验证一下，现在自己有个推测，推测好了以后我们就可以去验证啊，验证一下试试来从哪里开始得打个断点啊，得稍微打个断点，在哪打个断点呢？我们的observe。

最先最先收到通知的是这个什么呢？那没懂，是这个，来我们来看一下，走理你看来了吧，来了。是不是改成了一个新的值是吧？啊，这个新值等于以前的老子吗？不等于。接着把新值复制给什么value，就是把保存最新的值呗。这个呢其实重要性不大，大家了解一下就行，这个呢是对新的值进行监视。为什么要这么做呢？这主要说一个事啊，本来假设我的A属性等于的是一个字符串的。后面呢，我这个A等于了一个对象，对象里面有个B。那也就是说要不要对这个新的这个B进行监视啊，要那要监视是不是要去调用这个方法才能监视。

认到不不过这个你说的时候其实完全可以不用说的啊，这个倒是可以开始不用说啊，如果你你知道你很清楚，那你可以说这个其实说不说不是最重要的。啊好，下面干嘛去通知谁先是通知，相当于非先则收到通知是谁地跑对吧，而地跑里面，哎，这个要说了，看到有几个我小。三个我想。对吧，刚才我们已经推测好了，对不对，三个。啊OK，那也就是说现在他会去调用每一个我的什么。Update的方法呗，那也就是说啊，Update方法这个吧。那它会调用这个里面的乱码，那我在这打个断点啊，来我就直接点它找你是不是来一个，找来一个我起好，接着得到它最新的什么。

得到他最新的值。啊一曲值啊一曲值优惠去掉盖的，其实现在关系建立没有。建立了，你看他进不进去兴趣吗。进不进不进，因为那个关系是不是在初始化的过程中已经建立了。对不对啊，OK，来。啊，这个地方还还要点距离啊，把它去做啊。回到还是那个在那盖，我这样啊，因为这个把这个把这个断点稍微去掉一下，因为每次都跑它吧，呃，不太爽。就是那个这个get啊，Get里面的这个water里面的这个get，把它去掉一下啊，把它去掉一下，我们回到这里来，嗯，看到我在这打过来让他过来啊。好，把这个面再去掉，嗯。

那现在呢，得到一个最新的值啊，接着呢，这个是以前的什么老值。值有变化吧，有变化，那有变化以后，下面把最新的值给了什么。是不是存起来好，下面的关键呢，这干嘛去？是不是调用回调函数去干嘛去，是不是更新界面去。那这个代码最终啊，会去调用这一个方法，我们可以把这个方法呢，稍微的去看一看走里啊就看看这个啊，不能看扩得去手动的打个断点，你要不断那太费劲了啊，这一个找到这个文件看里面传了就这里呗。有的时候动态阶段非常关键啊，你不加断点的话，其实是挺费劲调到这里来。能看懂，好这个方法是去更新节点，这个不用再强调了吧，前面我们反复看过对不对啊OK。

大家看到现在还是这一个。性子还有老子。脑子还没变成星星对吧，来走一把，哎，这个应该在上面有几个刚好被刚好我不小心划下来了。看能不能拉下来，诶看到了吧。能不能看到现在是不是变了，那其他的是不是类似的，那下面是不是又来一个，又来一个以后呢，最终又会调用这一个回调函数，调用这个回调函数了。是不是要改一个，接着又会去啊，到我们这个更新这里来啊，最终呢去更新。我来节点。Tony。能看到吧，啊OK。这个时候这个更新就完成了。

当然我们现在是不是只是写了一个啊，都写的都都是内，其实你完全譬如说写一个啊，外浮点内或者外点A是不是都可以。能不能看到，那我这边我在更新的时候，我除了更新内，我还可以去更新，呃，This点点什么name。啊，给他来一个啊来来一个是吧。天呐，来来来个来个一好。能不能看到啊好，那下面呢，下面啊，我们来看一下，看看是一个什么样的情况啊。其实现在呢，就稍微的我们会建立看一下啊，先整体看一下我们这个地方有几个窝小。几个我三个我嘛，123好，前面两个我。

有几个对应的地方。都是一个吧，而且是同一个。对不对，说白了啊，假设我们的这个这个呢，我叫W，假设叫W1吧，啊W1啊，这是第一个对应的是deep是。应该第几第零，因为它是零开始的，我们假设这个从一开始懂不懂，好，那我们的下面这个呢，相当于WR。对，也是什么第零。有没有看到好，下面这一个很关键啊。大三第一第三个我想对应的是什么啊，这样所以说对应的是第一和什么第二。是吗？看一下这一个第零嘛，这个是第一嘛，这一个是什么第二。

先看着吧，啊，OK，首先当然我们自己要推测这种关系。当然另外一个方向，还有一个方向啊，还有一个方向什么方向呢，就是地理。关联了几个，我写了W1，他什么W算了吧，因为它数组关联了嘛，对不对，好还一个。还有哪个地方有对应关系。第一。对应谁啊？W什么三就一个吧，就一个，还有什么第二。对什么？还是WX？如果这个对应关系都懂了，其实我相信你肯定能把这个过程搞得差不多，但是你要不懂这个关系，后面的流程就有点费劲。

好来，现在我们再来看一下啊，看一下这个过程，把这里面大点先去掉啊，我们在关键位置打断点就得了啊，啊哪个位置呢，一个是在这个国桥里面建立关系，先看建立关系。先看鉴定关系在做可以吧，我们看一下。走，你。好，那现在呢，我们来看一下谁准备建立关系给谁name。对吧，给name啊，OK，那当前的what应该对应谁？这个应该是可以知道的，不是前面这一个嘛。是吧，啊OK，这个name吗？好来能进来吧，能当前这个地方里面啊，大家看到是第零，也就是name对不对，也就是对应的name，而当前这个tip ids里面有东西吗。

还没有对吧，没有不可加一个吗。这个有没有了，诶还没将进哦，这个是看它还没有是吧，这个里面加了一个我。是是把我加到什么D里面去了，下面还没执行呢。是不是相当于他们俩之间相互引用了，对吧，相互引用了好来看下一个。下一个应该针对的是谁？顺便吧。对不对，也就是说第二个我写了吧，第二个我写好来看一下能不能进来，总理进来了吧。好，我们加之前里面已经有一个什么。W1了对不对，那再一加呢，把W2是不是也加进去了，是不是两个握起了。两个watch来对应的是同一个表达式，但一个是大块表达式，一个什么we for we text，应该说对吧，好，下面。

我问一下大家。这一个deep ids里面有没有东西。没，就是我停在这，现在有用，我放上去我就能看出来嘛，没有，因为是一个新的我脚。是吧，我们现在是不是看第二个表达式看它呀，一个新的怎么可能有呢，对不对。能看到吧，好来走，那下面是不是就有了一个。呃，这个是不是还是那个ID0啊，是同一个地方吧，同一个地方OK，好没问题再来。再来的时候来啊，下面走，你好，此时看到。看谁在看谁。是不外浮属性啊，外浮属性，而外浮属性里面现在有握吗。

没有，是不是刚开始空的嘛，你看着。好，现在我给他什么加一个。在，而这一个我对应哪一个表达式？这个。是不是啊，现在是不是看他呀，好。那现在我的deep ids里面是不是也没有，也就是我里面没有关联来关联一个。有了吧，啊有了。也就是说现在我的这个当前整个我是不是加上了第一了，还缺谁，是不是还缺第二呀。能懂不？那我们把第二来看看会不会过来啊，走，你又来了啊。嗯，第二来了看一下。是不是掉下来了，那第下来以后接着啊，我们第二里面有东西吗？没有没有，我给他什么加一个。

是不是加了一个这个是不是也还是对应的是点的。能懂不好，我们这个deep ids里面。诶。有一个了，为什么有一个了，有谁有哪个地方。有谁哪个属性对应的地方Y对啊，相当于现在我们在整这个内。对不对，外整完了不就是内吗？对吗？啊，OK，好，那这一家就几个了。两个，那也就是说当前的watch是不是关联两个地方，为什么是关联两个地方？因为我是两层，对啊，就是这个看层次啊，一个是看使用的次数，一个是看什么，你的层级是几级对吗？啊OK。

那就基本上就OK了。对不好，那也就是说关系是不是已经建立好了。关系建定就是我们现在写的这个关系啊，对吧，下面的工作其实关系一旦建立好以后，后面就很简单啊，非常简单的是下面我点击这个按钮是不是更新去的啊，点击按钮是去更新的。那去更新来啊，其实看这个没意思啊，这个不会进去，这没什么太大意义，懂吗？现在我们看这个没意思啊，把它这个断点给它去掉，我们现在看谁去了，看那个set。因为我更新数据嘛，不应该看看那个叫什么observer里面。是吧，看observe里面什么set。我啊，OK，来刷新一下，这个赛是不会进来的，点下它走，你过来了吧，过来了，那这一次过来是哪条语句导致的了？第多少行？

40。是不是40行，就这一个吧。对不，那这一个来看一下啊，这个这一个首先收到通知的是我的set，而我set里面去通知谁去。地吧，那通地，而地又是通程序，我想那他现在啊，我要问一下。有几个对应的窝角，也就是说我改的这个另有几个窝两个。这两个吗，不是。是不是？定理嘛，对应W1和是吧，好吧，看是不是啊，也就是说这一个数组里面有两个。对不啊，没有任何问题，那下面就是要去更新我在这一个water里面啊，把这个water打开啊，找到它的update方法，你不用找update找他就行。

对吧，点一下它是不是过来了，就是取一下最新的值，是不是最新的值吗？取一下老的值。两个值相等吗？不等，保存最新的值。干嘛去？调用更新对吧，调用更新，也就是说我如果就这么点一下界面应该已经变了。界面已经变了，看一下。变没有是不是变了吧啊变了好，那这不就完了，下面还有啊呃，下面这个让是下一个的诶。啊，第二个了吧，第二个，呃，对，第二个我小啊，还有一个我小对不对，我一共有两个我小，是不是要更新它呀。懂不懂需要跟他啊来下面是不是又一套流程。大家看一下，走走好过进来了。

就不变了吗？是吧，啊，我问大家，我再点一下会进入哪去。下雨。啊，这一次做了，是不是我还更新另外一个数据，我更新了，另外说白了我就进入这里面，进入这个。这个导致的一个问题，对吧，这会导致水电。赛吗？你来看一下是不是走一把。是不啊，接着是不是又刚才一套流程了啊，OK，好，现在啊现在啊，我要说一下来。这里面有几个挖角。就是这个数组里面有几个元素。是不是就一个呀。对应的表达是谁？Y点什么内。那最终就可以调用这个更新的方法是吧，获取最新的值，获取老的值不一样，保存新值，好观点来了，就看这个变不变美。

妯娌。变了没有变了，那就没了，完了。啊。你要想向他搞，跟他说清楚数据绑定，其实最最关键的，我觉得最最关键的，先要把什么东西说清楚了，把这两个的关系，你要先说这里面最最重要的两个东西，一个叫deep，一个叫什么。啊。你可以一点一点的去说啊，这个要这个说，其实说个五六分钟十分钟都没有什么问题。好。那到此为止呢，我们整个就去说好了，也就是说如何建立关系是在。Date中啊属性的什么呢？什么方法里面建立的，Get方法中建立对吧，中建立的，这是一个，还有一个什么时候建立。

对不，这个地方什么时间什么时候对吧，建立首先来说是大的时间，是初始化的时间，对吧，初始化关键是初始化的什么时候呢？对吧，编译啊，初始化的编译啊啊或者解析吧，解析谁模板。模板中的表达式。对吧，是简立好解析模板中的表达式，为什么会去调用get呀。你想想看，解析模板表的时候，它是不是会去取啊，解析模板表的它是不会先去六一个对应的什么有一个概念，它解析每个表达式，我们就排除这个事件的表达式啊，六一个什么what啊十啊，用解析表达式啊，创建我对象式。

建立为什么要这个时刻大家想，我们现在是建立deep跟我的关系。对吧，Deep是不是先创建我什么后创建，也就是说一旦what创建这个关系是不是有限定条件呢。啊，就这么个事。嗯，OK。好啊，到此为止，我们这一个就算是完成了。