Vue是數(shù)據(jù)驅(qū)動視圖模式脑融，數(shù)據(jù)變更后虏劲，會自動更新視圖。
原生js中要更新視圖通常是通過觸發(fā)事件演闭，然后修改數(shù)據(jù)不跟，最后獲取dom節(jié)點并且把數(shù)據(jù)更新到dom節(jié)點。
在Vue的開發(fā)中我們只用修改數(shù)據(jù)就可以達到視圖更新的效果船响，<b>這里Vue通過數(shù)據(jù)的監(jiān)聽幫助我們實現(xiàn)了視圖的更新</b>躬拢，這是Vue中的響應式躲履。
所以要實現(xiàn)響應式的原理（簡單實現(xiàn)~）要解決兩個問題：
1、監(jiān)聽數(shù)據(jù)的變化聊闯。
2工猜、數(shù)據(jù)發(fā)生變化時更新視圖。
本文先解決第一個問題：如何監(jiān)聽數(shù)據(jù)的變化菱蔬。
這里要用到 ES5 中的 Object.defineProperty() 方法篷帅。查詢 MDN 可以看到該方法的作用會直接在對象上定義一個新屬性，或者修改一個對象的現(xiàn)有屬性拴泌，并返回此對象魏身。其語法如下：
Object.defineProperty(obj, prop, descriptor)
其中參數(shù) obj 是要定義的對象（目標對象），prop 是要定義或修改的屬性名稱（key）蚪腐，descriptor 是屬性描述符箭昵。
說一句題外話。Vue這里用到了ES5的Object.defineProperty()方法回季，也說明Vue不兼容IE8及其以下的瀏覽器家制。
<b>這里重點是屬性描述符，它是一個對象類型的數(shù)據(jù)泡一，其包含很多屬性颤殴，這里重點用到的是其 get 和 set 屬性。</b>
MDN 中關于 get 和 set 的解釋如下：
get：屬性的getter函數(shù)鼻忠，當訪問該屬性時涵但，會調(diào)用此函數(shù)，函數(shù)不接受參數(shù)帖蔓，函數(shù)的返回值會被用作屬性的值矮瘟。默認為 <b>undefined </b>
通俗講的意思就是，當調(diào)用對象中某個屬性時讨阻，會觸發(fā)該屬性上的get方法芥永，并且該getter的返回值會當做時該屬性的值篡殷。
set：屬性的setter函數(shù)钝吮，當屬性值被修改時，會調(diào)用該方法板辽，此方法接受一個參數(shù)奇瘦，這個參數(shù)就是該屬性被賦予的新值。默認為 <b>undefined</b>
意思就是當給對象中某個屬性賦值時劲弦，會觸發(fā)該屬性的set方法耳标，并且將賦予的新值作為參數(shù)傳遞
好了，看到這里應該大概有想法怎么去實現(xiàn)監(jiān)聽數(shù)據(jù)的變化了邑跪。因為屬性被賦予新值時會觸發(fā)該屬性上的set方法次坡，所有主要就是去重寫屬性的set方法呼猪，在set方法中調(diào)用視圖更新。
直接上代碼
// 定義數(shù)據(jù)
var data = {
name: 'ABC',
age: 18,
friends: [1, 2, 3, 4],
skill: {
work: 15
}
}
// 視圖更新
const renderView = () => {
console.log("******* 視圖更新 *******", JSON.stringify(data));
}
// 數(shù)組類型的數(shù)據(jù)修改監(jiān)聽 -- 去修改其push\shift\pop等方法砸琅，在這些方法中實現(xiàn)視圖的更新
const arrProto = Object.create(Array.prototype) // 備份數(shù)組原型宋距，因為待會兒會修改數(shù)組數(shù)組其原型上的方法
const methodList = ['push', 'pop', 'shift']
methodList.forEach(method => {
arrProto[method] = function () {
console.log("method: ", method);
Array.prototype[method].call(this, ...arguments) // 例用Array原型原本的方法實現(xiàn)數(shù)據(jù)邏輯
renderView() // 實現(xiàn)視圖的更新
}
})
// 實現(xiàn)監(jiān)聽到數(shù)據(jù)變化的處理方法
const reactive = (obj, key, value) => {
observer(value) // 迭代，監(jiān)聽對象數(shù)據(jù)
Object.defineProperty(obj, key, {
get() {
return value
},
set(newVal) {
value = newVal
console.log("***********key: ", key)
renderView()
}
})
}
// 數(shù)據(jù)監(jiān)聽方法
const observer = (target) => {
if (typeof target !== 'object' || target == 'null') {
return target
}
// 數(shù)組處理
if (Array.isArray(target)) {
target.__proto__ = arrProto // 修改目標數(shù)組的原型指向
} else {
// 普通對象處理
for (var key in target) {
reactive(target, key, target[key])
}
}
}
observer(data)
// 手動修改數(shù)據(jù)症脂，查看控制臺打印
// data.age = 20
// data.skill.work = 20
data.friends.push(1)
// data.friends.unshift(1) // unshift 沒有寫在methodList中谚赎，所以執(zhí)行這句代碼不會觸發(fā)視圖改變
需要說的是，列表類型的數(shù)據(jù)需要將將視圖更新操作放到其原型上的方法中實現(xiàn)诱篷『剑總所周知，Vue 中數(shù)組數(shù)據(jù)是不會響應式更新數(shù)組下標賦值的棕所，只有使用 push闸盔、pop 等數(shù)組方法才會更新視圖。
arr[1] = "A" // 視圖不更新
arr.push("A" ) // 視圖更新
所以對于列表類型的數(shù)據(jù)需要單獨處理琳省，具體操作是改變該數(shù)組的原型指向蕾殴，重新實現(xiàn)其 push、pop 等方法岛啸，這些方法原本邏輯的實現(xiàn)依靠 JS 中數(shù)組原型 Array.prototype 中對應的方法實現(xiàn)钓觉，然后再添加視圖更新操作即可。具體就是上面代碼中的這個部分：
// 數(shù)組類型的數(shù)據(jù)修改監(jiān)聽 -- 去修改其push\shift\pop等方法坚踩，在這些方法中實現(xiàn)視圖的更新
const arrProto = Object.create(Array.prototype) // 備份數(shù)組原型荡灾，因為待會兒會修改數(shù)組數(shù)組其原型上的方法
const methodList = ['push', 'pop', 'shift']
methodList.forEach(method => {
arrProto[method] = function () {
console.log("method: ", method);
Array.prototype[method].call(this, ...arguments) // 例用Array原型原本的方法實現(xiàn)數(shù)據(jù)邏輯
renderView() // 實現(xiàn)視圖的更新
}
})
注意，這里只在 methodList 中添加了 push瞬铸、pop批幌、shift 方法，所以上面代碼也只能實現(xiàn)上面三個方法的響應式監(jiān)聽嗓节，正常的應該把所有的方法都寫在 methodList 里荧缘。
