56_尚硅谷_Vue_源码分析_数据绑定与数据劫持介绍

好，那下面呢，我们要需要去看它的另外一个。叫什么呢？数据绑定。我们在分析它的原理，分析它实现之前，你先要对它有个理解，比如说你要表达清楚我们要分析的这个概念到底是怎么回事。对吧？什么意思，什么是数据绑定呢？你要能跟人说的清楚，先把这个概念说清再说，那什么是数据绑定呢？对吧。啊，OK。啊，在这里面啊，就数据绑定涉及到两个方面，两个两个两个两个角色，一个是页面显示一个界面。对吧，啊，再一个呢，就是我的数据内存中的数据，内存中的数据。啊，数据绑定呢，主要涉及到就是重点，重点是更新是如何实现的，也就是说我要去更新界面，我如何做到的。

我更新界面最直接的办法是干嘛呀？我们以前更新界面最先的时候。我要更新界面最直接的方法，比如说我的P标签的内容要改一下。拿到P标签，超出它的属性也就说白了，通过原生的DOM是不是就更新。说白了就直接操作页面呗，对吧，OK，那现在啊，那个不是数据绑定啊，而我们现在要想去更新页面。只需要更新什么呀。譬如说我P标签里面有一个message。对，不要显示，我现在要改变它的显示，从买卖C，从A变成B。我该怎么做？我是不是只需要去执行一句话叫this message等于B就可以了？

是吧，那这是什么意思呢？那怎么怎么跟他表达你你你做的这个事情和结果呢。对吧。啊，数据绑定它可以说是一个效果，是一个结果，比如说这个结果是个怎么描述，我们要更新界面的显示，只需要更新data中的什么数据就可以，或者说一旦我更新了data中的某一个属性的数据，那对应的界面。就会发生变化。啊，这里面我还强调了有一个概念叫直接使用或者什么呢？间接使用什么意思呢？譬如说我更新了message。我的页面有一个大括号表的是叫message，是不是直接使用呢？那什么叫间接使用呢？譬如说我有一个计算属性叫叫BB对吧？呃，这个BB呢，是根据这个message计算产生的结果。

有可能吧，那我在界面里我显示BB，看似我这个BB是不是这个Mac机吧。对不对，但我再去读这个BB的值的内部。是不是操作了这个message。能懂吗？啊，这个我们把它可以称之为间接使用。啊，也就我在页面里面直接使用或者间接使用了这个属性的节点都会发生什么变化，而且是这个。制度，这是最关键的。啊，也就是说有了数据绑定以后，我们从以前我们去操作多种元素变成什么呢。操作数据。动物元素里面的数据就自动的发生了变化，这么回事吧？

啊，OK。这个一定要能说清楚，我们的数据绑定到底是什么叫数据绑定，简单来说就更新数据界面界面。你不用像这样去一点一点的把我这个东西给背下来啊，你要有一个理解，最后用一句简单的话能说清楚就行。因为你背的东西很容易忘啊，不要背啊。好，再说一个事情，那数据绑定了，相当于是我们这个view产生的一个效果。那这个效果它是如何实现的呢？对不对？这个效果它如何实现，实现这个效果的技术有一个名称叫什么呢？数据劫持。那就要说数据劫持和数据绑定它的关系是什么，对不OK？或者说，你用一句什么话能够描述清楚他们之间的关系？

也就是说，在view中，它是使用数据截止的这个技巧来实现了什么数据绑定的效果。这个区别，这句话能区别开来吧，我用数据劫持的这个技巧，这个技术来实现了数据绑定的效果，我们刚才说数据绑定是什么效果，只要我去更新数据。对应的界面的节点就会发生什么变化，这就是结果，这是一个效果啊，那实现这个效果的技术我们称之为什么数据榜，数据劫持对吧？那数据劫持到底是一个什么样的技术呢？前面我们说到这，我们还并没有具体的说数据结石到底是个什么样的技术，对不对啊，OK，它有一个思想，其实这个又用了我们前面讲的那个语法。

DeFine property。来监视什么呢？Date中所有属性的变化。一旦变化了，干嘛去更新界面，其实这个好理解了，你想想看，也就是说我们，诶有可能说昨天咱们不错过了吗。咱做过来是给是坚吗？是给data里面的属性加set方法吗？我们昨天是干嘛呀，在那个在那个就是数据代理里面。是给力的吗？不是吧，是给什么VM？对不对，添加P多叉叉叉的属性，给它提供get和什么set方法，而我这里说的是什么意思？大家看到是给date台中的。

属性变成叉，叉叉提供什么？重点set，其实get到时候也需要啊，因为重点是set get是用来辅助set了啊，OK，提供set方法，那提供set的方法什么一个概念，大家想有了赛的方法就有什么效果呢？我是不是能监视这个值的变化，这个值什么时候变了？啊，这个值我做一些什么事，这个值就变了，我写一段什么代码，你就告诉我啊VM或者说this对吧，那我们可能更多的写Z对不对，Z点叉叉叉或者VM点叉叉等于一个，譬如等一个三。对吧，好，这个时候你说我负了这个值谁最先知道啊。啊。是VM里面赛还是date里面的赛？VM里面我这不是VM吗？对吧，我现在是VM点叉叉等于三嘛。

我是不是改变了VM的这个叉叉的值，那他是不是马上知道了，他马上算你说。它它一遍它里面干嘛去的，还记得不，它是不是改变对中差差的值。那你改变差date中插它的值，谁知道了？Set知道了，那set知道以后干嘛去？这不更新界面吗？那也就是说我们VM里面的和date里面的这个属性的。作用不太一样吧，对，不不一样，这个里面是用来去实现数据代理的，对不对，而这一个是用来去实现什么数据绑定的。所说的数据管理，不就数据改变以后，我的界面就变吗？是不是我这里面有个set，是不是监视数据的变化呀，数据一旦变，我里面就干嘛去。

更新界面嘛。这是一个最最基本的思想。不管怎么着，你至少要把这个基本思想给人表达清楚。但是通过实践表明啊，很多同学在面试的时候连基本思想都说不出来。我也不对你提出提出特别高的要求，你至少要把基本思想给他表达清楚。其实这个基本思想很简单，就是给我们的data中的所有属性提供set方法，对吧？这个set方法不就先是data种属性的变化嘛，一旦它变了就去更新界面。至于怎么更新界面，你都不用说，美人说万一他告他问我怎么更新。那我可以说具体的那个怎么更新，那这个我就现在啊，不能完全说清楚了，或者说已经不是特别清楚，这没关系啊。至少你要把基本的套路，他做了个什么事情搞清楚，对吧。

如果这个基本思想说不清楚，你说你去说那具体代码里面有些什么东西，阿布的空中楼阁没用，都你都没机会说，我跟你说，因为你最先肯定要说你基本套路是什么。他如果再有兴趣，你还能说，那你就继续说，你又不能说了。那就这个事情结束了。就是这个啊，我反复跟他强调了这个基本的想法，大家一定要能说清楚，后面我们肯定要去说他具体做了一些什么事，这里面涉及到好几个对象啊，他的这个做法也还是有点小复杂啊，最后最最关键的，我们最后有一个图。啊，到了之后这个东西吧，都要画图来解决是吧？啊OK啊，有了这个图，其实我们这个图呢，已经只能现在我们只在这这步搞定了。

不知道大家能没能看清楚，首先我们上来是不是用了一个M6M对不？这个时候我们是不是创建了一个comp例实例干嘛去的解编译解析指令其实还少了一个叫大跨表的是吧，对不啊，在这解析里面我们的目的目标是什么？初始化视图或初始化界面呗，对不对？调用谁最终调用谁才能去初始化界面阿，把data里面的一些更新的方法吧。也就是说咱讲了这么一句话。讲的这一条线。嗯，还有其他的还没讲。啊，其实就是在说大家在想啊，我们的组件我们用view主要两个方面，初始化显示和更新显示，对不对，也就是说我们初始化显示是不是已经研究明白了呀，那后面我们要研究什么更新显示。对啊，你在分，你在跟人说的时候啊，一定要有像这样的一种表达方式。

啊，我就从两个方面跟你说对吧，OK，很自然，没什么，就是交流嘛，啊OK，初始化显示是一个什么情况，更新显示又是个什么情况。OK，你不仅能说清楚技术，还一个你让他看到你非常有条理。啊，你是一个非常理性的程序员。好行，那这个呢，我们先是大概的知道一下啊，它的一个啊，数据绑定以及数据劫持他们的关系，以及我们实现的一个基本的思想是什么。后面呢，我们就来去看一下它具体一步一步怎么做的啊，不过呢，先休息一下。