57_尚硅谷_Vue_源码分析_数据绑定_数据劫持准备

那下面呢，我们就来去看一下数据绑定它是如何来去做到的，我们先来去写点关于数据绑定的效果呗。啊，其实也非常简单啊，来看一下，先来引入一些GS，因为这个引入比较多，所以我把它。复制过来，把这整个也复制过来吧。看谁。看下V是吧，好，引入这四个，接着呢去溜了一个MVM，整一个它啊，这个不搞这么复杂，哪一个类啊，来一个V啊好，下面需要去写一点模板，来个div，嗯，来个ID为test，没你是吧？好，下面呢，来一个P标签，去显示这一个name，再来一个button。名字叫更新，我们重点就研究更新懂不懂，好来这个地方哪一个啊，用比较原始的写法写啊，V杠二冒号等于update。

那update需要定义在什么method里面，这个咱昨天都研究过了是吧，这个肯定会掉。重点在于里面我会写一段啊更新数据的代码this.name等于。嗯，等于什么呀，等于星星吧，好来。下面。就我们其实要研究一个什么，其实大家一定要明确目标啊，我们要研究什么东西，把它放稍微放大一点，我们研究目标就是我点一下更新，诶，它就变了。

能不能？就是前面我点击它肯定会调用这个，这个咱已经研究过了吧，重点在一，我现在在里面是不是就做了一个数据的更新，那数据更新之后界面是不是就立即发生了变化。那是如何做到的呢？我又没有直接去更新界面，对不对？如何做到的呢？这就是我们要研究的一个目标啊，这里面要补充说明一下，这个数据绑定严格来说它是包含两个方向啊，都可以称之为数据绑定，一个是初始化显示，一个更新显示，但其实我们重点是啊，其班一般说数据管定，重点说这个更新显示。我们如何更新显示的？更新date中的属性数据页面是不是更新了啊？好，初始化显示其实是我们前面研究过的。是一个什么样的技术？模板解析吗？对吧，模板解析或者模板编译不懂。

啊，OK，好。来，下面我们就通过第八个调试的方式呢，先看一遍。啊，先看一眼。Sources。好，来把这个。这调到这种模式啊，欢乐模式啊。诶，下面这个是吧，这种模式看起来更大一点空间，把这前面的断点呢都去掉一下。啊，我们从哪开始研究了，大家看啊，回到我们的FVM上面的这一片都写过了初始了是吧，下面这个也搞过了。就差谁了，这个我不知道。观察是吧，OK，其实就是从他起始开始的啊，前面都是啊，要做一些准备工作，就是从他起始开始。来，我就在这里打个断点可以吧，我们来看一下。

OK，那现在呢，来看到我们这里，我也就是说现在我们已经实现了数据的什么代理吧。是不是，但是我们的模板变异没有还没有，那在模板没有变异之前，它是不是就执行了这个observe这样一个方法。那我们就要去看它是用来干嘛的，是不是现在我进行什么操作进入是吧，我就要跳路。好，这个value传的是什么？大家看到传的是谁啊？大家可以看一下走过来。传的是什么？是不是对的对象，呃，对象里面有一个什么属性name啊，这个你就不用说了，再说起来就没意思了。能不能看懂，好，他说你的这个value。什么意思？如果不存在或者不是一个什么对象的话，那直接。

直接return，那后面的事情都不做了是吧？好，否则呢，我们会进去吗？我们进不进去。不进去吧，因为我们四个对象。我们date这个value是个date对象了是吧？好，下面它创建了一个什么over over什么意思。观察者。翻译过来不就是观察者的意思吗？那么呢，观察。观察date啊，更加好的说法是，应该是观察date中所有的属性。好，我们来看一下，那我们现在进行什么操作。进入你要一跳过那就没了，对吧，进入。好，下面。把那个date对象数据是保存起来，那保存在哪个里面，This是谁？谁的实例over observe的实例呗，对吧，Over实力看一下我们会有时候会边看回过来看一下这个图啊。

看到这个图了吗？也就是说我们现在研究啊那个数据绑定，而我们前面说过了，数据绑定在VI里面是用什么技术实现的。是不是劫持的技术，而这个劫持技术是在哪个里面做的？我不知道，那也就是说我们快接近目标了，是不是好，没问题。来。继续往下看啊，保存在observe实例对象上面，记着this是点work，对work。什么意思？我靠。我不知道这个单词啊，就走路啊。你说这我怎么理解这走路啊。有一个网络用语叫走起，反正我是这么理解的啊。

什么叫走起啊，就开始了啊，OK。啊，这个写写这个哥们，这哥们也是挺挺搞笑的一个人，就是他就是说现在我们还没有去开始去做，现在是不是开始对我的数据是不是进行劫持去。是不是启动吗？相当于相当于是不是个start的意思，好，那下面我进行什么操作。是不是姓路啊？当然我也可以在这打个断点。是不是很轻松的一点一下拉倒是吧，可以吧。动态加断点是一个非常重要的技巧。也就是说你开始最先就加了一个断点吧，一般对不对，那就加一个断点，有的时候不太方便，有的时候需要动态加断点好来。保存，This是谁哦？

你要时时刻刻都要知道这是谁啊，谁不知的实力啊，填一下好便利，谁去？遍历date中所有的属性吗？好，这个时候不加断点就非常费劲了，就上面这个断点加不加都没关系，听懂不，这个端点不加就调试起来比较麻烦。所以要稍微的加一下，接着点一下左侧的这个就行。贝是谁？那我现在就一个属性，我我们先来点简单的，等会我后面再加啊，肯定要多加几个了。好，下面密点看。哎，这个名字吧，Com本身叫转换的意思。嗯，如果翻译过来，其实不太好去说它的一个太大的一个意义，说实话主要看它的这这个里面的这个意义很有用，其实它本身并没有做太多事，是不是就钓了这条鱼啊。能看到吧，好，我们先看一下它传的参数啊，K是什么属性名，而date中号K。

什么东西？这不对应的值嘛，这不属性名嘛，根据属性名取到里面的值嘛，是吧。这有用到什么数据代理吗？有利用数据代理吗？没有就K就在那个date里面。我们编辑的是不是就对里面的某一个属性啊，看懂吧，啊，这根本就没有用到什么数据代理啊好来这次再进入。好，DeFine react啊，这要说一下这个单词的意思。啊叫响应式。大家可能接触过一个布局，叫什么响应式布局，那这一个响应式跟那个响应式布局是两码事啊。是两码事，这个响应式是一个什么概念呢？其实就是实现数据绑定效果的一个，我只要去也就数据跟界面会关联起来，一旦更新数据，我的界面就发生变化，那这个属性数据就是个响应式的。

啊OK，说白了就是用来去实现数据绑定的，要对我的这个属性去实现什么呢。数据绑定。反复强调啊，数据绑定是什么？更新数据对应的界面就会发生什么变化。啊，那这一个属性数据属性就是一个响应式的属性。啊，也就说白了，你改变它，它能有响应啊，就这个意思啊好，那下面我进行什么操作呢。我反复问他这个问题是非常关键的，怎么操作再记录？对吧，好下面。说白了，下面就是使使用数据劫持实现数据保定最最关键的一个方法里面的一些代码。

你看这个方法是不是有针对性的，针对某一个属性吧，Data中的某一个属性去对它实现响应式的数据，保定来吧，那一上来他就做了一个事情，溜了一个什么。Deep啊，这个呢，暂时先不看它啊，暂时先不看它，后面我会跟大家讲啊，这个deep右来右边的事例好了，记着也有意思哦。它对我的这个value又去调用observe，那又去调用observe的话，那想啊，那不又会过来吗。你想你调我们刚才是不是通过调用observe这个函数过来的。他不又过来吗？但有个条件啊。有个条件，实际上这有一点像一个间接的地位。有一个像一个间接，虽然说不是直接DV，我们说DV是个什么概念。

自己调自己，他有直接自己调自己吗？没有，但是他是个间接的，什么意思，你看嘛，我不是我一定要用。是不是new的这个observe new observe内部是不是去起去调用这个work，而work里面是不是会去便利调用这个convert，而convert里面是不是又去调用这个DeFine reactive。呃，里面是不是又回来了。对不？能看懂吧，但是所有的递归，它是不是应该都有一个结束的条件，这就是结束的条件，看懂吧，这是干个什么事啊？为什么干这事啊？对这个地方说我date里面的数据假设啊，我date里面有一个属性A，有一个属性BA呢假设是一个ABC。对吧，B呢比较特别对象。这个对象里面有个C。

啊，C的值的是三。对吧，好了，我们最先变异的是哪些属性，A跟B什么B。是吧，有便利的C吗？没有，但也就是说C要不要实现数据绑定，有，那如何来对C也实现数据绑定呢？啊，递归嘛。对吧？我在对B实现数据绑定，准备对B实现数据绑定前，我得看一下这个B里面的值，这B的值是不是一个什么对象，如果是一个对象，我又会对它里面的属性实现什么？数据绑定。对吧，啊，那也就是说我们的这个方法最终的最终是对date中什么。所有有一概念层次。

诶，这个这个话好像你前面说过了，那个是在什么时候搞个对过来着，编译模板的时候对吧，我们对模板进行解析编译的时候，是不是也是要递归找出所有的直节点，强调一下是所有层次的子节点，对不对，所有层次的子节点，那它这个是所有层次的什么。属性。这个能懂吧，啊，但是我们现在其实只有几层。是不是只有一层对不对？当然我们真正写的时候只有一层吗？不可能，是不是也有可能有两层？不懂啊，比如说啊来个。能看到啊，这个里面假设它也有name可以有吧，这两个name冲突吗？不冲突啊，OK啊，假设叫up吧，啊，那个再来一个别的说啊是吧。

不上错了，28，差距太大，不太不太合适啊来。来啊，那也就是说啊，现在我是不是就有多层了呀，那也就说我开始编辑的时候只能编辑到内和什么外，那这样我是不是对他能实现数据劫持，数据绑定，对不但是name这里面的这个name和A级需不需要。那肯定需要啊，要不需要的话，我要改它，它就不会变了，对不对？A，其实这个啊，并不呢，就是递归的一种啊，虽然不是直接递归，但也是间接的递归，对吧。好。

那也就是说啊，现在我们先让它，先让它过去啊，现在我没有我们现在的这个value，这个value，你也就说我问一下，你说我点一下它。第二，它是去到是21行呢，还是说又停到别的地方去21，为什么，因为我这个Y吧，它是一个一般的字。对不对，他不会遇到我们中间那个断点能懂吗？啊走一下来看，能看到不好没问题。来下面下面我们看一下啊，整体先看一下整体的一个做了什么事，这个是给我的什么date对象去定义K属性，我问大家date对象现在有没有K属性。现在在我定义之前，在我执行这个23之前，他有没有这个K属性。有，那有人说有，为什么还要滴滴呢？

是不是你都明明有了这个data里面有吗？确实有啊，这不有吗？对不对，那这个有的话，我们这要重新定义吧。那为什么要重新定义啊，那肯定是我新的定义这种方式比它那个更强大。那强调在哪呢？给它添加了什么东西呢？啊，添加了set和get。能不懂我们这种定义方式，它有对应的set get吗？没有，但是我们的目标是不是要给他添加塔，和贝塔实现数据绑定嘛，你要坚持这个属性的变化嘛。能不能看到。好，来看一下这个是说是什么。可没举的这个说是什么不可重新定义了，你不能再重新定义了，你再重新定义，那你搞不好你把我get覆盖了，那我这个数据绑定一点效果都没有。

能不能懂好看一下啊，整体看一下就get是返回这个先不用管它啊。这个返回当前的一个value值，主要是看。其实set用来干嘛去了，我整体说一下，这个set就是用来去更新界面的，但是不会那么直接啊，这个更新界面还是挺复杂的。啊好，我要问大家一个事情，你说我点一下，他是他会去执行这执行完这一行吧，对不？我问大家会进入是吗。会会。就是我点一下它，也就是说，说白了我在定义的时候，它会不会进入set执行，不会的，对吧，会进入get执行吗？也不会，你要取数据的时候才会，对吧，你要去修改数据的时候是不是才进入赛道，我现在是不是只是做准备工作。

能看到吧，我现在就是做一个准备工作。相当于也就相当于现在啊，这个数据的截词已经做了一部分了，看的这个，看着这个图。啊，就对数据的观察已经观察上了吧，对吧，就等待着什么。等待干嘛？等待你去改变那个数据吧，你改变数据，我后面的事情是不是就可以做呀？认不，但是还有很多事情啊，需要去研究什么意意思，现在相当于我们啊，前面这个看过了，这个也看了，其这个对象我刚才创建过了吧，只是还没有深入的讲，它就这一个有一个地图，嗯。对吧，溜了一个地步准备好对吧，做了一个准备工作，但这些事情发生了吗？这些事情发生了吗？还没有这个要点，我点更新按钮是不是才行。

听到不，那其实我们还有一个初始化的过程没有研究。就现在我们研究研去还是在研究，在初始化的过程中做了一些事情，对吧，还有一个事情没研究哪个了，这个。Z。啊，前面呢，我们有一个事情还没研究，我们得去把它呢研究一下啊，而且我们当前这个研究呢，其实说实话还研究的是比较浅显的，很多东西都没跟大家说啊，因为现在说了大家也可能听不明白，我们一段一段的做，先把。