likes
comments
collection
share

Vue中的数据驱动

作者站长头像
站长
· 阅读数 10

Vue中数据驱动

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

那么,什么是数据驱动呢?

数据驱动解释

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

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

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

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 属性描述(配置项)

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

  1. value:设置属性的默认值
  2. writable:设置属性是否可以被修改
  3. enumerable:设置属性是否可以被遍历
  4. configurable:设置属性是否可以被编辑(包括删除等等)
  5. get:获取属性值
  6. set:设置属性值

其中setget就是我们要用到的属性:

举个例子:

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

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

结尾

感谢大家观看,本人小白,有不足之处还望各位大佬指正。