Vue的數(shù)據(jù)驅(qū)動

好久沒有更新文章啦羞延，以為一直不知道寫什么東西給大家分享。今天一個朋友問題vue的數(shù)據(jù)驅(qū)動是什么？所有我給大家說說我理解的vue的數(shù)據(jù)驅(qū)動竹习。
1、首先從字面意思理解下：數(shù)據(jù)驅(qū)動? 什么是數(shù)據(jù)驅(qū)動列牺？我理解就是通過控制數(shù)據(jù)的變化來改變某物或某事整陌。
2、Vue的數(shù)據(jù)驅(qū)動中瞎领，數(shù)據(jù)驅(qū)動什么泌辫？就是說物或者事是什么？這里的vue數(shù)據(jù)驅(qū)動的是視圖也就是DOM元素讓DOM的內(nèi)容隨著數(shù)據(jù)的改變而改變九默，這里視圖（DOM）可以理解成上面的改變的某物或者某事
當我們知道vue數(shù)據(jù)驅(qū)動的字面意思的時候我們是不是在想vue是怎么實現(xiàn)數(shù)據(jù)驅(qū)動的呢震放？
首先我們看下下面的圖片（我自己畫的）

我不知道大家能不能看懂上面圖片，說的通俗一點就有一個人（數(shù)據(jù)驅(qū)動）在監(jiān)視一個叫（數(shù)據(jù)）的家伙驼修，一旦這個家伙有任何舉動他講會告訴他的領(lǐng)導（視圖DOM）,然后領(lǐng)導就會做出一些相應的變化殿遂；
回到話題就是這個人(數(shù)據(jù)驅(qū)動)怎么監(jiān)視的呢？又是怎么把這些情況反映給領(lǐng)導（視圖DOM）的呢乙各？
首先我們定義一個數(shù)據(jù)：

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

我定義了一個對象和一個數(shù)組數(shù)據(jù)并且綁定到視圖勉躺，讓后我們改變一下data1和data2：

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

在vue中當改變數(shù)據(jù)的時候，視圖中的數(shù)據(jù)也會相應改變觅丰。那到底中間做了什么呢饵溅？第一怎么監(jiān)聽數(shù)據(jù)變化?
注意：vue的數(shù)組類型只允許下面方法操作數(shù)組才會觸發(fā)視圖更新：

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

數(shù)據(jù)監(jiān)聽變化：
先看vue的文檔怎么說的：
Vue 實例的數(shù)據(jù)對象。Vue 將會遞歸將 data 的屬性轉(zhuǎn)換為 getter/setter妇萄，從而讓 data 的屬性能夠響應數(shù)據(jù)變化蜕企。對象必須是純粹的對象 (含有零個或多個的 key/value 對)：瀏覽器 API 創(chuàng)建的原生對象咬荷，原型上的屬性會被忽略。大概來說轻掩，data 應該只能是數(shù)據(jù) - 不推薦觀察擁有狀態(tài)行為的對象幸乒。

2.png

vue說遞歸將 data 的屬性轉(zhuǎn)換為 getter/setter，從而讓 data 的屬性能夠響應數(shù)據(jù)變化唇牧。這就是話不就是告訴我們他監(jiān)聽了data里面所有的數(shù)據(jù)嗎罕扎？然后轉(zhuǎn)換為getter/setter？這個時候是不是知道vue是怎么監(jiān)聽data數(shù)據(jù)啦丐重？沒有錯vue監(jiān)聽data是通過defineProperty方法來監(jiān)聽的腔召。
大家看一下下面的defineProperty如果做到監(jiān)聽對象變化的：

let data = {
    "a":null
};
Object.defineProperty(data,"a",{
    get:()=>{
        console.log('獲取數(shù)據(jù)啦');
    },
    set:()=>{
        console.log('數(shù)據(jù)發(fā)生變化啦');
    }
})
//先回車在執(zhí)行下面代碼看變化
data.a;
//然后執(zhí)行下面代碼看變化
data.a = {b:1}

（大家可以復制到Google控制臺進行測試下）

效果圖.png

現(xiàn)在大家就應該知道vue數(shù)據(jù)監(jiān)聽怎么做了吧。（小提示：以后大家面試中如果被問題vue為什么不支持 IE8 及以下版本,你就可以說因為vue用了defineProperty方法來監(jiān)聽數(shù)據(jù)扮惦。因為defineProperty只支持IE9及以上版本瀏覽器）

defineProperty兼容性.png

知道怎么監(jiān)聽數(shù)據(jù)啦臀蛛，就知道這個人是用什么方式來監(jiān)視這個家伙啦（data數(shù)據(jù)）；然后就是怎么去告訴領(lǐng)導這個家伙（data數(shù)據(jù)）的變化啦崖蜜；
（遺留問題：怎么去實現(xiàn)當真的數(shù)據(jù)變化去變化視圖呢浊仆？大家是不是說可以操作dom啊，vue就不是直接操作DOM,這又是Vue一個神奇的地方那就是Virtual DOM（虛擬DOM樹）豫领。大家可以討論這個問題抡柿。謝謝大家）

：：：皮一下

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

^_ | ^_ | ^_ | ^_ | ^_ | ^_
知識個人總結(jié)，有不對的地方希望大家提出來等恐，大家共同進步洲劣。
如有問題，歡迎大家鼠锈，可以加Q討論哦：1366379285，加好友備注“簡書”