vue在哪里定义数组_Vue源码解读——变化侦测篇

点击上方蓝字关注我们

前言作为一名前端开发，掌握 Vue也是必要的。尽管我们对Vue的用法已经较为熟练了，可能在实际项目中也足以应付。但是我们对Vue的各种用法和api只能是知其然，不知其所以然。有鉴及此，我们可以从github上拉取一份Vue的源码以供学习参考之用。 源码目录Vue源码目录大致如下：

从上面的目录结构可以看出，Vue的整个项目包含了类型检测相关、单元测试相关、与平台无关的核心代码以及跨平台运行的相关代码。 由于我们只是学习Vue的设计思想以及代码实现的相关逻辑，所以我们暂不去关心类型检测、单元测试以及特定平台运行等相关逻辑实现，仅关注它的核心代码，即src/core和src/complier这两个目录下的代码即可。 变化侦测综述我们都知道，Vue框架是个 MVVM开发模式的框架，即 Model-View-View-Model，它本质上是MVC的改进版，把MVC中的Controller改进成了 View-Model。这也是Vue的最大特点——数据驱动视图，视图的变化会同步到数据。 在这里，我们可以把数据理解为状态，而视图就是用户可直观看到页面。页面不可能是一成不变的，它应该是动态变化的，而它的变化也不应该是无迹可寻的，它或者是由用户操作引起的，亦或者是由后端数据变化引起的，不管它是因为什么引起的，我们统称为它的状态变了，它由前一个状态变到了后一个状态，页面也就应该随之而变化，所以我们就可以得到如下一个公式： UI = render(state) 上述公式中：状态state输入，页面UI输出，状态输入一旦变化了，页面输出也随之而变化。我们把这种特性称之为数据驱动视图。我们知道state和UI都是用户定的，而不变的是这个render。所以Vue就扮演了render这个角色，当Vue发现state变化之后，经过一系列加工，最终将变化反应在UI上。这里的render也就是MVVM中的View-Model层。 Object的变化侦测 1. 前言 我们知道：数据驱动视图的关键点则在于我们如何知道数据发生了变化，只要知道数据在什么时候变了，那么问题就变得迎刃而解，我们只需在数据变化的时候去通知视图更新即可。要想知道数据什么时候被读取了或数据什么时候被改写了，其实不难，JS为我们提供了Object.defineProperty方法，通过该方法我们就可以轻松的知道数据在什么时候发生变化。 2. 使Object数据变得可观测 数据的每次读和写能够被我们看的见，即我们能够知道数据什么时候被读取了或数据什么时候被改写了，我们将其称为数据变的‘可观测’。 要将数据变的‘可观测’，我们就要借助Object.defineProperty方法了，在本文中，我们就使用这个方法使数据变得“可观测”。 首先，我们定义一个数据对象 car ：

我们定义了这个car的品牌brand是BMW,价格price是3000。现在我们可以通过car.brand和car.price直接读写这个car对应的属性值。但是，当这个car的属性被读取或修改时，我们并不知情。那么应该如何做才能够让car主动告诉我们，它的属性被修改了呢？ 接下来，我们使用 Object.defineProperty 改写上面的例子：

通过Object.defineProperty方法给car定义了一个price属性，并把这个属性的读和写分别使用 get() 和 set() 进行拦截，每当该属性进行读或写操作的时候就会触get()和set()。如下图：

可以看到，car已经可以主动告诉我们它的属性的读写情况了，这也意味着，这个car的数据对象已经是“可观测”的了。

为了把car的所有属性都变得可观测，我们可以编写如下代码：

在上面的代码中，我们定义了 observer 类，它用来将一个正常的object转换成可观测的object。 并且给value新增一个 __ob__ 属性࿰