62_尚硅谷_Vue_源码分析_双向数据绑定

后面呢，我们要看一下它的双向数据管定如何实现，我们先把双向数据管的效果先给大家演示一下，它有个基本的效果。来，我们来写一个啊。把这个。过来。对吧，好。有个这样的，嗯，就以我们最先的一个例子为例，啊，一个div啊，里面还是有一个ID，接着呢，这里面有一个input。双向数据管理必然涉及到一个指令model message p标签message可以吧，好，那这个里面date里面就是有一个什么message假设。别的都不要了，都可以不用。

啊，效果呢，也很明确，诶这个地方啊，是不是有错误啊。呃，看一下我们的ID test message。没问题吧，没有看一下。检查。看没？呃，这个object DeFine property在一个不是对象的上面去调用。我这里面写的没有任何问题吧。We刚model message嘛，是吧，丢了一个ma me message，看他有说在哪一行吗？看一下。呃，这里面。是吧？26号就这一条是吧，那这一条，那我就在这打个断点呗，这不调试吗。

打扮你。过来。看一下这个对的。很奇怪是吧，传过来，最后传过来竟然是个什么I。这不是个对象吗？是吧？嗯，对象里有个message等于的硅谷啊，这这一定完成，它传过来是个安来，我们看一下它从哪过来的，看右边是吧？啊，我这里面传的是一个unde find过来找你这一个this.date是什么？Andde DeFine。那就往前推呗，这个里面，哎，这个对方。这个有吧，啊这一个有好，那有那一个，这个对称是有的吧，有的好，接着它调用worker传的是什么。

Data，有吧，有好，进入work里面。今天我这一个data有吧，有好了，接着去便利data拿到某一个。哎，是不是有问题啊，啊，这个时候就出现了问题，它变异的时候，也就是说它的返回值变异的时候拿到某一个K，这就不对呀。是吧，啊，这里面它就好像遍历出问题了。那这个地方来啊，这样把这里面的这个端点给它去掉，这端点太多了，给它去掉，那我就到这里来呗。这意思吧，啊，先让他过去好再刷一下。好，我们来看现在我的这个data是一个对象，对象里面有message，没有任何问题是吧，可能我们中间是不是一不小心改了哪个代码。

哦，对，我们中间是不是改过一个代码，好像确实是啊，呃，这个有个有个地方应该可能传的不对，我们看一下this.data这个this是不对，应该是me就这里对吧，应该写me保存了，Me用了吗？没有，而现在的上面是window吧。啊，这个例子大家看到现在我们，诶不对呀，他这里面得到的。是吧，但是应该是要密，这个是for each吧，数组的for方法里面他根本就不知道啊，这样一个情况应该是幂点什么。来，我们刚才改的时候改一点代码，主要还是要调试去找到啊是哪个文件呢？Observe。来，翻过来，翻到上面。能不看到写个什么力点，其实它其实不一定对啊，就实际情况，它传的是个氨发应的对不对。

能看到吧，好，我们来再来看一下。看呗，先过去。对吧，再刷一下。我现在觉得应该对的，所以我呢，快速的操作一下还有问题吧，是没变啊，就是说有问题吗？啊，我代码还没变啊，那把它这个关掉。我刚刚改的它没有变对吧，没变来再来打开一下。可能有缓存啊。有了吗？是不是有了啊，这个要注意啊，大家有出了问题，你得知到第八个调试，就这两天咱调的是基本上是这辈子最多的啊OK，这你这辈子应该最多的啊，我这辈子就不好说了，好。好，这就是一个双向数据保定比较典型的效果，也就是说当我去改变输入框页面中的数据的时候，那个数据自动被保存到哪去了。

是不是data里面对吧，而data里面的数据一旦变化又会显示到什么。是不是页面上来，这个咱研究过。这不是数据绑定吗？也就是说这是个单向板定吧，就是前面我研究过的变化，Data页面自动显示，这前面研究过，我们现在重点是看什么。看这个。也就是说双向绑定是建立在什么单向的基础上吧，那大家觉得如果让你去想，你觉得这东西他怎么做呢？他得做些什么事才能把我这个输入的数据。同步到这个data里面去啊，其实就是监听非常简单，就多姆事件监听，那也就是说我们得去看一下它是如何来去解析v model这样一个指令属性的吧，嗯，我们就来看一下啊来。

右键检查。Sources来找到我们那个位置啊，我就直接找到我们啊目标的位置看。Comp里面就会进行编译啊指令啊，编译指令其实有一个指令解析，我们前面一直没看，就什么呢？解析VGA model来我们找到解析指令的位置啊。其实就在这里嘛。一般指令的解析。有没有看到，来来看一下，看他进不进来，走你。哎，这个不要了是吧。这个标了。是不是过来了？大家看一下这里米。Model，而且你再点的话，那就没了。是不是解析已经完成了啊，我们得进去看好，那这一行代码最终会去调用U里面的哪一个函数了。

刚才我们说过了，是不是这样一个函数。能懂吗？好来，那我就点一下。这句话实现什么效果？是不是实现一个数据绑定的this.b的。也就最终我们要去将啊，大家看呢，输入框所对应的值是不是实现一个初始化的显示。我开始指定Y了吗？有没有没有，但开始一上来是不是显示了二台硅谷要想实现这个事，就涉及到我们是要调用这个半的，把load里面的那个value给显示出来。来，我们来看一下这一条语句最终会调用下面的哪个方法？阿定理恒的话是它吗？是update方法吗？不是，是哪个呢？跟大家说一下。

这个。Model of，我们来看一下是不是在这打个断点。可以吧，好走，你过了没有？过来了，那这你看这个时候它是不是传过来一个当前的一个表达式的值，就是额的硅谷吧，接着把这个值设置到我们节点的什么属性上面。Value属性。能不能看到，那也就是说现在是不是实现界面的初始化显示。同时为当前的这个表达式创建了一个对应的什么。能不能看到那这个棒的就结束了。这个里面做了两件事啊，第一件事情解析表达式，显示一个value对吧，同时创建一个对应的什么water。好，下面。

下面其实也很好懂，保存当前的comp。啊，接着看，这是去取表达式的什么。This then get a vm value。表达式是不是所对应的值啊，表达式所对应的值。这不取到一个value了吗？把硅谷好下面看做什么事？no.I的even listener。干嘛去添加事件，什么监听什么监听，Input监听，好，这个得说一下，Input监听和欠监听它是有区别的。在原生的多里面切，你监听什么时候才发生呢？就是失去焦点的时候才发生。能懂吗？而input监听什么时候发生，在输入的过程中就会发生，我输入一个A发生，输入一个B又发生，这个能闻到，所以我们能用嵌接听吗？不能。

啊，好。那你其实你这样一做，它就整个函数就建立就绑定上了，那我在这里面呢。走过。他有金路这个回调函数吗。没有吧，没有，要有的话不就进来了吧，那这个回调函数什么时候才会执行呢？我只要往里面改变这个输入，它是不是就会执行了，这不就是我们想要的效果吗？No。是不是过来了？好，这一个第一条语句干嘛去了？一点点value。谁的值输入框最新的值吧，对吧，输入框最新的值，再判断一下你最新的值跟以前的值相等吗。要相等的话，还有必要继续吗？没有。

那如果说不等干什么去？STEM也就将最新的值保存到表达式所对应的属性上面吧。那你想这个操作。又会触发一个什么流程？也就是说，现在我要做的事情就是把这个值会保存到date里面去吧，对不对？A保存导致于什么结果呢？啊下载就最终呢，这个是不是会变化呀，更新界面呗，是吧，啊就会更新界面OK。来我们啊，可以看一下最后。走嗯，啊，这个里面呢，是我们那个阿啊阿诶跑这了，我们去现在去做的是哦，更新最新的一个值是吧，更新最新一个值来把这个不要了啊，这个不要了，我们看一下那个界面。

变没了。只能过去一下。呃，他硅谷看一下啊，还还行，我先过去吧，还我还是打个断点看比较好一点，再来一下啊，再来一下，我得再打个断点。来过来得看这里啊，我在这里去做，最终会导致于这个东西调用，我得打个断点会明确一点，看到observe。导致水流。Set。是设置值去了吗？对吧，好，你看整理是不是过来了。能看到儿这个晒晒干嘛去？是不是会去通，这里面最先是不是通知deep，而deep里面呢通知我。一共有几个我？几个？也就说白了，有几个就要看我的这一个，大家看到我的这个属性变化，我的现在不是将你ma一遍了吗？我的这个值变化，大家想有几个表达式用到了这个，这用的这个主性名两个对吧，是两个吧，那是不是去通知他们。

这个流程咱是不是已经研究过啊，就不再去一个一个看了啊。好，那要说下边那分析完以后，下面我们稍微的去写一些注释来把它啊再熟悉一下，其实这里面呢为啊需要写的地方很少啊，特别少，我们找到compel的那个文件。大家compare找到我们的那个，嗯，这里面啊有一个。就这一个。对吧，其他的都讲过这个是干嘛的了，实现嗯，实现数据化的，数据的初始化显示和创建对应的什么。

我也简单写一下这个咱前面说过，这不都有办法吗？好，下面，下面的终极目标是要去干嘛去。说绑定一个事件监听了啊，绑定一个事件监听，但呢，它这地方这个是干嘛呀，得到那上面那个就不说了啊，得到表达式的什么，是不是表达式的值。啊，干嘛给节点绑定input时间监听。对吧，这个阶梯什么时候触发啊，输入改变时是不是触发呀？啊触发它干嘛去了，得到最新的数据最新值对吧？啊，就输入的最新值啊，如果没有变化。

是不是直接结束啊，直接结束你变都没变，那就没有必要处理啊，直接结束啊好，下面。这干嘛去将最新的值。Value保存给表达式所对应的什么呢？属性。举个例子，我的表达是a.B。我的这个值保存在A里面吗？是个负值吗？是吗？给B，而且是给A里面的那个B对不对。那我有可能外面有个B啊，外面B处理吗？不处理，这里强调是个A里面的那个什么B赋值。

而这一负值啊，因为我重新给B负值P负了一个三对吧，那B所对应的S是不是会调用，那B所对应的地是不是收到通知对不而所有啊相关的我。是不是就会收到通知，那些what里面是不是应该去更新相关用到B这一个，这一个属性的所有的表达式指令所对应的节点是不是都要变化。嗯，其实又进入了我们啊，前面说的数据保密的流程。最后一个是保存最新的值对吧，其实就其他的就没什么其他流程跟前面一样，那也就是说啊，最后我们来看一下。再强调一遍，双向数据绑定是建立在什么单向数据绑定的基础上，是先有了单向数据绑定，也就是从model到什么view，双向什么意思？既有这个方向，还有哪个方向？View到什么model，那要想从view到model需要绑定什么？是不是input监听？

那也就是说我在去解析指令的时候，解析这个指令的时候，给元素当前元素绑定input监听。当input the value发生改变时。将最新的值复制给什么当前表达式所对应的对属性。一旦给date里面的某一个属性赋值了，那是不是又会进入这样一个流程？而前面我们是不是已经研究过这个流程了，那就没什么问题了，其实就多了一个input监听，你只要一口一句话就能说清楚。啊，我的v model实现双向数据绑定，首先有我们从model到view的数据绑定，对吧，再加一个input监听就足够了。

好看。这是这样一个事情啊，这个时候就没有什么太大难度了，其实最最难的还是啊，这。对吧，因为这个里面涉及到对象比较多。一共有这么几个啊，Observe deep，还有什么water？一共四个吧，啊一共四个，OK，我们画的整体结构也是不是这四个吧，就这四个这里面。对吧。