Vue中的数据驱动解释

Vue中数据驱动

使用过Vue框架的小伙伴知道在Vue中有这么一个玩意：v-model。 这个玩意就用到了Vue中的数据驱动（数据双向绑定）。

那么，什么是数据驱动呢？

数据驱动解释

数据驱动是vue.js最大的特点。在vue.js中，所谓的数据驱动就是当数据发生变化的时候，用户界面发生相应的变化，开发者不需要手动的去修改dom。

再通俗一点就是，你在这里改变了一下数据，在页面其他使用该数据的地方也会随之发生改变，而我们开发者只是在这里改变了一下数据，并没有直接操作DOM去改变其他地方的数据。

那Vue是怎么实现的这一效果呢？

Vue数据驱动

其实这个原理有点像那个中间人，举个例子吧，你的领导有一天改动一条通知（数据发生了改变）：今天不上班，然后被某个人听见了（监听），这个人就把领导的消息传递给下面的程序员，下面的程序员一听到这个消息，马上就准备收拾东西回家休息了（页面的元素随之改变）。

大概就是下面这张图：

那现在摆在我们面前的就有两个问题，这两个箭头是如何实现的呢？

首先我们看看数据驱动是如何监听数据发生变化的？

Vue 实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化。对象必须是纯粹的对象 (含有零个或多个的 key/value 对)：浏览器 API 创建的原生对象，原型上的属性会被忽略。大概来说，data 应该只能是数据 - 不推荐观察拥有状态行为的对象。

这是vue文档里面的话，意思就是vue为data里面的属性（也就是我们的数据），都添加了getter/setter。这样就可以监听到数据的变化了。是不是还有有点蒙？没关系，其实就是利用defineProperty方法来实现监听的。

简单说说defineProperty

可能有小伙伴不太熟悉这个方法，我在这简单的提一下：

• 语法：Object.defineProperty(obj,property,descriptor)
• 参数：obj 绑定属性的目标对象 property 绑定的属性名 descriptor 属性描述（配置项）

下面我列出一些常见的属性配置项：

• value:设置属性的默认值
• writable:设置属性是否可以被修改
• enumerable：设置属性是否可以被遍历
• configurable：设置属性是否可以被编辑（包括删除等等）
• get：获取属性值
• set：设置属性值

其中set与get就是我们要用到的属性：

举个例子：

 let data = {
     a:1;
 };
 Object.defineProperty(data,a,{
     get:()=>{
         console.log('获取数据啦');
     },
     set:(value)=>{
         console.log('设置新数据啦',value);
     }
 })

通过这个方法就可以实现vue中数据驱动对数据的监听，vue如何对视图进行更新呢？这就用到了vue中的虚拟DOM。我们下集聊聊这个Vue中的虚拟DOM。