這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助
一、Object.defineProperty
定義：Object.defineProperty() 方法會直接在一個物件上定義一個新屬性，或者修改一個物件的現有屬性，並返回此物件
為什麼能實現響應式
透過defineProperty 兩個屬性，get及set
- get
屬性的 getter 函式，當訪問該屬性時，會呼叫此函式。執行時不傳入任何引數，但是會傳入 this 物件（由於繼承關係，這裡的this並不一定是定義該屬性的物件）。該函式的返回值會被用作屬性的值
- set
屬性的 setter 函式，當屬性值被修改時，會呼叫此函式。該方法接受一個引數（也就是被賦予的新值），會傳入賦值時的 this 物件。預設為 undefined
下面透過程式碼展示：
定義一個響應式函式defineReactive
function update() {
app.innerText = obj.foo
}
function defineReactive(obj, key, val) {
Object.defineProperty(obj, key, {
get() {
console.log(`get ${key}:${val}`);
return val
},
set(newVal) {
if (newVal !== val) {
val = newVal
update()
}
}
})
}
呼叫defineReactive，資料發生變化觸發update方法，實現資料響應式
const obj = {}
defineReactive(obj, 'foo', '')
setTimeout(()=>{
obj.foo = new Date().toLocaleTimeString()
},1000)
在物件存在多個key情況下，需要進行遍歷
function observe(obj) {
if (typeof obj !== 'object' || obj == null) {
return
}
Object.keys(obj).forEach(key => {
defineReactive(obj, key, obj[key])
})
}
如果存在巢狀物件的情況，還需要在defineReactive中進行遞迴
function defineReactive(obj, key, val) {
observe(val)
Object.defineProperty(obj, key, {
get() {
console.log(`get ${key}:${val}`);
return val
},
set(newVal) {
if (newVal !== val) {
val = newVal
update()
}
}
})
}
當給key賦值為物件的時候，還需要在set屬性中進行遞迴
set(newVal) {
if (newVal !== val) {
observe(newVal) // 新值是物件的情況
notifyUpdate()
}
}
上述例子能夠實現對一個物件的基本響應式，但仍然存在諸多問題
現在對一個物件進行刪除與新增屬性操作，無法劫持到
const obj = {
foo: "foo",
bar: "bar"
}
observe(obj)
delete obj.foo // no ok
obj.jar = 'xxx' // no ok
當我們對一個陣列進行監聽的時候，並不那麼好使了
const arrData = [1,2,3,4,5];
arrData.forEach((val,index)=>{
defineProperty(arrData,index,val)
})
arrData.push() // no ok
arrData.pop() // no ok
arrDate[0] = 99 // ok
可以看到資料的api無法劫持到，從而無法實現資料響應式，
所以在Vue2中，增加了set、delete API，並且對陣列api方法進行一個重寫
還有一個問題則是，如果存在深層的巢狀物件關係，需要深層的進行監聽，造成了效能的極大問題
小結
- 檢測不到物件屬性的新增和刪除
- 陣列
API方法無法監聽到 - 需要對每個屬性進行遍歷監聽，如果巢狀物件，需要深層監聽，造成效能問題
二、proxy
Proxy的監聽是針對一個物件的，那麼對這個物件的所有操作會進入監聽操作，這就完全可以代理所有屬性了
在ES6系列中，我們詳細講解過Proxy的使用，就不再述說了
下面透過程式碼進行展示：
定義一個響應式方法reactive
function reactive(obj) {
if (typeof obj !== 'object' && obj != null) {
return obj
}
// Proxy相當於在物件外層加攔截
const observed = new Proxy(obj, {
get(target, key, receiver) {
const res = Reflect.get(target, key, receiver)
console.log(`獲取${key}:${res}`)
return res
},
set(target, key, value, receiver) {
const res = Reflect.set(target, key, value, receiver)
console.log(`設定${key}:${value}`)
return res
},
deleteProperty(target, key) {
const res = Reflect.deleteProperty(target, key)
console.log(`刪除${key}:${res}`)
return res
}
})
return observed
}
測試一下簡單資料的操作，發現都能劫持
const state = reactive({
foo: 'foo'
})
// 1.獲取
state.foo // ok
// 2.設定已存在屬性
state.foo = 'fooooooo' // ok
// 3.設定不存在屬性
state.dong = 'dong' // ok
// 4.刪除屬性
delete state.dong // ok
再測試巢狀物件情況，這時候發現就不那麼 OK 了
const state = reactive({
bar: { a: 1 }
})
// 設定巢狀物件屬性
state.bar.a = 10 // no ok
如果要解決，需要在get之上再進行一層代理
function reactive(obj) {
if (typeof obj !== 'object' && obj != null) {
return obj
}
// Proxy相當於在物件外層加攔截
const observed = new Proxy(obj, {
get(target, key, receiver) {
const res = Reflect.get(target, key, receiver)
console.log(`獲取${key}:${res}`)
return isObject(res) ? reactive(res) : res
},
return observed
}
三、總結
Object.defineProperty只能遍歷物件屬性進行劫持
function observe(obj) {
if (typeof obj !== 'object' || obj == null) {
return
}
Object.keys(obj).forEach(key => {
defineReactive(obj, key, obj[key])
})
}
Proxy直接可以劫持整個物件，並返回一個新物件，我們可以只操作新的物件達到響應式目的
function reactive(obj) {
if (typeof obj !== 'object' && obj != null) {
return obj
}
// Proxy相當於在物件外層加攔截
const observed = new Proxy(obj, {
get(target, key, receiver) {
const res = Reflect.get(target, key, receiver)
console.log(`獲取${key}:${res}`)
return res
},
set(target, key, value, receiver) {
const res = Reflect.set(target, key, value, receiver)
console.log(`設定${key}:${value}`)
return res
},
deleteProperty(target, key) {
const res = Reflect.deleteProperty(target, key)
console.log(`刪除${key}:${res}`)
return res
}
})
return observed
}
Proxy可以直接監聽陣列的變化（push、shift、splice）
const obj = [1,2,3] const proxtObj = reactive(obj) obj.psuh(4) // ok
Proxy有多達13種攔截方法,不限於apply、ownKeys、deleteProperty、has等等，這是Object.defineProperty不具備的
正因為defineProperty自身的缺陷，導致Vue2在實現響應式過程需要實現其他的方法輔助（如重寫陣列方法、增加額外set、delete方法）
// 陣列重寫
const originalProto = Array.prototype
const arrayProto = Object.create(originalProto)
['push', 'pop', 'shift', 'unshift', 'splice', 'reverse', 'sort'].forEach(method => {
arrayProto[method] = function () {
originalProto[method].apply(this.arguments)
dep.notice()
}
});
// set、delete
Vue.set(obj,'bar','newbar')
Vue.delete(obj),'bar')
Proxy 不相容IE，也沒有 polyfill, defineProperty 能支援到IE9
參考文獻
- https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty