前言
之前學習 vue 的時候，一直沒刨根問底過，在看到網上這類文章比較多，參差不齊的質量有時候看的一頭霧水，當然也有不錯的文章，但是終究是別人的理解，于是寫一篇關于自己的理解記錄下來，親身實踐才能識訓更多！
初階：回應式原理
在說明之前，我們先了解一個 Object.defineProperty() ，參考 MDN 上的權威介紹 developer.mozilla.org/zh-CN/docs/… ：
Object.defineProperty()方法會直接在一個物件上定義一個新屬性，或者修改一個物件的現有屬性，并回傳此物件，語法
Object.defineProperty(obj, prop, descriptor) 復制代碼引數
obj要定義屬性的物件，
prop要定義或修改的屬性的名稱或
Symbol，
descriptor要定義或修改的屬性描述符，
回傳值
被傳遞給函式的物件，
注意：除了本文專案，我還結合多年開發經驗整理出2020最新企業級實戰視頻教程， 包括 Vue3.0/Js/ES6/TS/React/node等，有興趣的進扣扣裙 519293536 免費獲取，小白勿進哦！接下來我們繼續
在了解了這個之后，我們就可以用它來實作一個回應式的初級樣子，
const TestObject = {
name:"",
age:10
}
let tempValue = https://www.cnblogs.com/chengxuyuanaa/p/'';
Object.defineProperty(TestObject,'name',{
get:function (){
console.log('我被獲取了，我可以在這里搞點事情！')
return tempValue;
},
set:function (newValue){
console.log('我被寫入了，我可以在這里搞點事情！')
tempValue = https://www.cnblogs.com/chengxuyuanaa/p/newValue
}
})
復制代碼此時使用 TestObject.name 方法可以讓 get 和 set 里面的對應生效，
我想看到這里，聰明的同學可能會有一個疑問，為啥要搞一個 tempValue ？我直接 TestObject.name 在 get 和 set 里面賦值不行么？就像這樣：
const TestObject = {
name:"",
age:10
}
Object.defineProperty(TestObject,'name',{
get:function (){
console.log('我被獲取了，我可以在這里搞點事情！')
return TestObject.name;
},
set:function (newValue){
console.log('我被寫入了，我可以在這里搞點事情！')
TestObject.name = newValue
}
})
復制代碼真正運行的時候，其實會發現，陷入了死回圈，這里大家切忌要避免坑！
我們重讀MDN上的檔案可以發現，get 和 set 本身就是在獲取和設定的時候觸發的函式，在里面寫了 TestObject.name ，那么就會繼續呼叫 set ，然后繼續 TestObject.name ，繼續 set ，繼續.....無限回圈，所以使用一個臨時變數在外面，是比較安全的做法，
中階：接管物件
在前面基礎上，我們現在可以開始接管整個物件了，邏輯非常簡單，套個回圈，上代碼：
function ProxyObj(obj){
Object.keys(obj).forEach(key=>{
DefineObj(obj,key,obj[key])
})
}
function DefineObj(obj,key,value){
Object.defineProperty(obj,key,{
get:function (){
console.log('我被獲取了，我可以在這里搞點事情！')
return value;
},
set:function (newValue){
console.log('我被寫入了，我可以在這里搞點事情！')
value = https://www.cnblogs.com/chengxuyuanaa/p/newValue
}
})
}
const TestObject = {
name:"",
age:10
}
ProxyObj(TestObject)
復制代碼這時，聰明的同學又會有疑問了？為什么要創建兩個 function ，ProxyObj 和 DefineObj 不能堆在一個里面么？就像這樣
function ProxyObj(obj){
Object.keys(obj).forEach(key=>{
Object.defineProperty(obj,key,{
get:function (){
console.log('我被獲取了，我可以在這里搞點事情！')
return obj[key];
},
set:function (newValue){
console.log('我被寫入了，我可以在這里搞點事情！')
obj[key] = newValue
}
})
})
}
const TestObject = {
name:"",
age:10
}
ProxyObj(TestObject)
復制代碼不能，其實原因跟之前提到的問題一樣，存在死回圈的問題，那為什么我們拆分開來就不存在呢？因為這里的 DefineObj 傳入的形參，用我們了解到的 js 基礎知識來解釋，一個函式內的形參，相當于是函式內預設的變數，一般情況下（也會有二般情況）這個變數的生命周期僅在函式內，所以利用了這個特性，案例巧妙的將形參 value 拿出來傳遞和賦值，就不存在無限死回圈的問題了，
劃重點：使用 Object.defineProperty 切忌不要陷入到死回圈當中！
高階：收集依賴
理解需求
終于來到了收集依賴環節，這塊也是我之前一直沒有想通的地方，直到第二天醒來朦朧中看著螢屏前的代碼，突然若有所思了，話不多說，直接來看看需求，對于需求都沒有非常清晰的概念，直接上代碼有點暈，
const TestObject = {
name:"",
age:10
}
watcher(TestObject,'type',()=>{
return TestObject.age>18?'成年人':'未成年人';
})
復制代碼簡單實作
我們需要實作這個watcher函式，里面可以填入物件，并且設定關注的物件 type 屬性，此時該屬性還沒有在物件身上，我們需要賦予一下，當 age 變化以后，type 也要對應著改變一下，這就是我們所說的依賴收集需求，
我們這樣簡單實作一下：
function watcher(obj,key,cb){
Object.defineProperty(obj,key,{
get:function (){
const val = cb();
return val;
},
set:function(newValue){
console.log('該屬性是被用于去自動計算的哦~不要人工賦值！')
}
})
}
const TestObject = {
name:"",
age:10
}
watcher(TestObject,'type',()=>{
return TestObject.age>18?'成年人':'未成年人';
})
console.log(TestObject.type)//未成年人
TestObject.age=19;
console.log(TestObject.type)//成年人
復制代碼可以看到，我們通過這樣的方式，就簡單的實作了 TestObject 屬性上的依賴計算屬性 ，
完善需求
但是問題又來了，我如果不去讀取 type 它是不會主動更新的，如何做到 age 變化以后，type 自動更新呢？
在前面的基礎上，我們先定義一個依賴更新時候的函式 updateTodo 此時代碼變這樣：
let target = '';
function watcher(obj,key,cb){
function updateTodo(){
const val = cb();
console.log('更新啦',val)
}
Object.defineProperty(obj,key,{
get:function (){
target = updateTodo;//重點代碼
const val = cb();//重點代碼
target = '';//重點代碼
return val;
},
set:function(newValue){
console.log('該屬性是被用于去自動計算的哦~不要人工賦值！')
}
})
}
const TestObject = {
name:"",
age:10
}
watcher(TestObject,'type',()=>{
return TestObject.age>18?'成年人':'未成年人';//重點代碼
})
console.log(TestObject.type)
TestObject.age = 19;
console.log(TestObject.type)
復制代碼會發現我們順便在全域還定義一個target，儲存當前 callback，這里是我覺得最重要的部分，一定要認真看里面的這段，思考一下，我單獨拿出來：
target = updateTodo;
const val = cb();
target = '';
復制代碼callback函式長這樣：
()=>{
return TestObject.age>18?'成年人':'未成年人';
}
復制代碼可能大家會有疑問，target 賦一下有重置是什么騷操作？有何意義？
注意， callback 里面有一個 TestObject.age ！這個一旦被訪問，它的 get 函式就被呼叫了！那么此刻，前面target里面儲存的 updateTodo 函式，是不是就可以在 get 里面取到了呢？
所以在 cb() 執行完之后，實際上里面就有機會收集依賴了，target 就是這個作用，作為一個臨時的 callback 快取著，那么我們的需求也很好解決了，只需要在這里進行一次依賴的收集和釋放即可！
這里的疑問解決了以后，就開始直接上代碼吧！后面就比較好理解，跟我們前面的接管物件章節做一個合并，直接展示完整代碼，細細品味，非常有意思：
function ProxyObj(obj){
Object.keys(obj).forEach(key=>{
DefineObj(obj,key,obj[key])
})
}
function DefineObj(obj,key,value){
let deps = [];
Object.defineProperty(obj,key,{
get:function (){
console.log('我被獲取了，我可以在這里搞點事情！')
//依賴收集
if(target && !deps.includes(target)){//判斷是否存在或重復依賴
deps.push(target)
}
return value;
},
set:function (newValue){
console.log('我被寫入了，我可以在這里搞點事情！')
value = https://www.cnblogs.com/chengxuyuanaa/p/newValue;
deps.forEach(fn=>{//依賴釋放
fn()
})
}
})
}
function watcher(obj,key,cb){
function updateTodo(){
const val = cb();
console.log('更新啦',val)
}
Object.defineProperty(obj,key,{
get:function (){
target = updateTodo;
const val = cb();
target='';
return val;
},
set:function(newValue){
console.log('該屬性是被用于去自動計算的哦~不要人工賦值！')
}
})
}
let target = '';
const TestObject = {
name:"",
age:10
}
ProxyObj(TestObject)
watcher(TestObject,'type',()=>{
return TestObject.age>18?'成年人':'未成年人';
})
console.log(TestObject.type)
TestObject.age=19;
console.log(TestObject.type)
復制代碼當然，如果你對設計模式和一些代碼整潔有要求，看到這里你可能會覺得非常不爽，沒有關系，嘗試著自己來封裝下吧，或者參看 Vue 內的原始碼部分，
陣列型別檢測原理
1.關于陣列方面，可以參看 vue 原始碼部分，
主要邏輯是通過新建一個 Array 物件來代理實作原生 Array 物件的7大操作，當我們在 vue 里面使用陣列方法的時候，實際上使用的是 vue 替我們實作的一些方法，而不是原生的陣列操作，
2.這也很好解釋了，為什么 vue 不推薦大家使用 [] 方式修改陣列，因為受限于 js 語言本身，無法實作對 [] 修改的檢測，
3.注意：除了本文專案，我還結合多年開發經驗整理出2020最新企業級實戰視頻教程， 包括 Vue3.0/Js/ES6/TS/React/node等，有興趣的進扣扣裙 519293536 免費獲取，小白勿進哦！
本文的文字及圖片來源于網路加上自己的想法,僅供學習、交流使用,不具有任何商業用途,著作權歸原作者所有,如有問題請及時聯系我們以作處理
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/69777.html
標籤：JavaScript
上一篇：壞代碼與重構手法速查表