Vue核心②(MVVM、数据代理)

Vue核心②(MVVM、数据代理)

文章目录

​​MVVM模型​​​​数据代理​​

​​Object.defineProperty​​​​什么是数据代理​​​​Vue中的数据代理​​

MVVM模型

M：模型(Model) ：对应 data 中的数据V：视图(View) ：模板VM：视图模型(ViewModel) ： Vue 实例对象

图的右下角是一个model它指的是一个一般的JS对象。整个绿色的部分讲就是Vue所缔造的实例对象。

我们可以先看到向左指的箭头，他代表的意思是：存在JS一般对象里的数据经过Vue示例进行数据绑定，就把数据摆在了页面中想要的位置(页面就是把模板进行解析)

再看向右指的箭头，他的大致意思是：页面上的改变，能映射回数据里的改变。完整过程：DOM-通过监听视图的数据变化来动态的改变JS对象里存储的数据。

我们还可以通过代码来理解：

说白了ViewModel就是把一堆乱七八糟的数据和DOM结构在中间进行了一次链接(相当于一个桥梁纽带)。前端领域中的一些主流框架都是运用到了这个思想：把数据放在要求的地方，然后写出模板代码，模板里面具体怎么插入值，就是框架的核心。

以后拿变量去接收Vue对象的时候，一般统一用vm

注意：

在data中的属性，我们在vm对象中也可以找得到vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用。

数据代理

Object.defineProperty

首先我们要了解Object.defineProperty这个方法，在Vue的底层很多地方都使用到了这个方法(比如：数据劫持、数据代理，计算属性等)。

这个方法用来给对象添加属性，其中要传入三个参数：

给哪个对象添加属性添加的属性叫什么名字配置对象(比如属性值value，控制遍历enumerable，控制修改的writable，控制删除的configurable等)

其中控制遍历enumerable，控制修改的writable，控制删除的configurable的默认值都是false。

那么这个方法有什么特别之处？直接添加不是更加简单嘛？

用此方法添加的属性是不能被枚举的，也就是说不参加遍历。同时他还是不可以改变的，不可以删除的。(当然这些都可以通过配置对象进行修改)

配置对象中还能添加一些高级配置。例如我们现在提一个需求：我们将一个对象的属性值设为一个变量，我们想让这个属性值随着变量的变化而变化。

我们知道按照一般情况来说，这个是不能实现的，因为这个属性值他只会等于最初的那个变量值，其后变量发生改变，属性值也不会再发生变化。究其原因是因为代码从前往后执行，执行过了的代码不会再回头又去执行。

不过我们可以通过一个高级配置项get()方法来解决这一个问题，这个方法在有人读取对应属性的时候(也就是你defineProperty()中指定的属性)会自动执行。并且这个方法的返回值作为对应属性的值

同理还有一个高级配置项set()方法，这个方法会在有人修改对应的属性时调用，且会收到修改的具体值。

我们将上面涉及到的知识点形成代码：

什么是数据代理

​​数据代理​​：通过一个对象代理对另一个对象中属性的操作(读 / 写)

比如说我们有一个对象叫obj，他有一个属性x，还有一个对象叫obj2。我们想让obj2也能访问到x，并且能修改x。这个过程就类似于数据代理。通过代码来理解：

Vue中的数据代理

Vue中的数据代理通过vm对象来代理data对象中属性的操作（读/写）Vue中数据代理的好处更加方便的操作data中的数据基本原理通过Object.defineProperty()把data对象中所有属性添加到vm上。为每一个添加到vm上的属性，都指定一个getter/setter。在getter/setter内部去操作（读/写）data中对应的属性。

我们先给出代码，来看看它的具体代理过程：

我们将两个白色箭头从左到右依次称为第一步和第二步

我们首先解释第一步： 在创建完Vue实例对象vm之后，Vue会为这个对象准备一系列的属性方法。直到准备到_data,其中_data中的数据完全来源于data。注意这个过程没有使用代理，是直接赋值过来的。

为了避免繁琐的前缀，所以说Vue会继续为vm对象创建name、address属性，也就是第二步。​​这个name的值是通过getter去读取到data里面的name。当有人修改vm上的name时，会通过setter映射到data里面的name进行修改​​。address同理也是如此。 图中的紫色、橙色两条箭头代表的就是数据代理，他们都是使用Object.defineProperty来办到的。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。