本文正在参与「金石方案 . 瓜分6万现金大奖」
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。
结束
感谢大家观看，自己小白，有不足之处还望各位大佬纠正。
