Vue的数据驱动

好久没有更新文章啦， 以为一直不知道写什么东西给大家分享。今天一个朋友问题vue的数据驱动是什么？所有我给大家说说我理解的vue的数据驱动。
1、首先从字面意思理解下：数据驱动? 什么是数据驱动？ 我理解就是通过控制数据的变化来改变某物或某事。
2、Vue的数据驱动中， 数据驱动什么？ 就是说物或者事是什么？ 这里的vue数据驱动的是视图也就是DOM元素让DOM的内容随着数据的改变而改变， 这里视图（DOM）可以理解成上面的改变的某物或者某事
当我们知道vue数据驱动的字面意思的时候我们是不是在想vue是怎么实现数据驱动的呢？
首先我们看下下面的图片（我自己画的）

a

我不知道大家能不能看懂上面图片，说的通俗一点就有一个人（数据驱动）在监视一个叫（数据）的家伙，一旦这个家伙有任何举动他讲会告诉他的领导（视图DOM）,然后领导就会做出一些相应的变化；
回到话题就是这个人(数据驱动)怎么监视的呢？ 又是怎么把这些情况反映给领导（视图DOM）的呢？
首先我们定义一个数据：

data(){
     return {
        data1:new Object(),
        data2:new Array()
     }
}
//view 视图
<div>{{data1}}</div>
<div>{{data2}}</div>

我定义了一个对象和一个数组数据并且绑定到视图，让后我们改变一下data1和data2：

this.data1 = {
    a:2,
    b:3
}
this.data2 = [
    {
        name:'test',
        age:10
    },
    {
        name:'test1',
        age:11
    }
]

在vue中当改变数据的时候， 视图中的数据也会相应改变。那到底中间做了什么呢？第一怎么监听数据变化?
注意：vue的数组类型只允许下面方法操作数组才会触发视图更新：

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

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

2.png

let data = {
    "a":null
};
Object.defineProperty(data,"a",{
    get:()=>{
        console.log('获取数据啦');
    },
    set:()=>{
        console.log('数据发生变化啦');
    }
})
//先回车在执行下面代码看变化
data.a;
//然后执行下面代码看变化
data.a = {b:1}

（大家可以复制到Google控制台进行测试下）

效果图.png

现在大家就应该知道vue数据监听怎么做了吧。（小提示：以后大家面试中如果被问题vue为什么不支持 IE8 及以下版本,你就可以说因为vue用了defineProperty方法来监听数据。 因为defineProperty只支持IE9及以上版本浏览器）

defineProperty兼容性.png

：：：皮一下

//直接操作dom
let data = {
    "a":null
};
Object.defineProperty(data,"a",{
    get:()=>{
        console.log('获取数据啦');
    },
    set:(value)=>{
        document.querySelector('#app').innerHTML = JSON.stringify(value);
    }
})

^_ | ^_ | ^_ | ^_ | ^_ | ^_
知识个人总结，有不对的地方希望大家提出来，大家共同进步。
如有问题，欢迎大家，可以加Q讨论哦：1366379285，加好友备注“简书”