Vue的数据驱动

作者: damon小萧 | 来源:发表于2018-08-02 00:21 被阅读0次

vue简介
2020 vuejs 数据驱动(Zig)
Vue-入门
Vue.js学习记录第一天
vue面试需要用到的相关知识点
vue获取DOM
vue原理
vue学习笔记
Vue核心思想
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
vue说递归将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化。这就是话不就是告诉我们他监听了data里面所有的数据吗？然后转换为getter/setter？这个时候是不是知道vue是怎么监听data数据啦？没有错vue监听data是通过defineProperty方法来监听的。
大家看一下下面的defineProperty如果做到监听对象变化的：

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
知道怎么监听数据啦，就知道这个人是用什么方式来监视这个家伙啦（data数据）；然后就是怎么去告诉领导这个家伙（data数据）的变化啦；
（遗留问题：怎么去实现当真的数据变化去变化视图呢？大家是不是说可以操作dom啊，vue就不是直接操作DOM,这又是Vue一个神奇的地方那就是Virtual DOM（虚拟DOM树）。大家可以讨论这个问题。谢谢大家）

：：：皮一下

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

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