Vue中的数据驱动解释
作者:海绵宝宝_0113
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。
以上就是Vue中的数据驱动解释的详细内容,更多关于Vue 数据驱动的资料请关注脚本之家其它相关文章!