記住兩點(diǎn)
1已卷、使用 Object.defineProprety實(shí)現(xiàn)響應(yīng)式原理
2宪躯、 data屬性代理到vm(即是Vue實(shí)例)上
Object.defineProperty 是如何使用的窃款？
Object.defineProperty() 方法會(huì)直接在一個(gè)對(duì)象上定義一個(gè)新屬性再膳，或者修改一個(gè)對(duì)象的現(xiàn)有屬性醉旦， 并返回這個(gè)對(duì)象忘巧。
因?yàn)?Object.defineProperty() 是ES6新增的一個(gè)方法恒界，所有我們使用vue不支持IE低版本瀏覽器，我們?cè)谶x擇Vue開(kāi)發(fā)項(xiàng)目的時(shí)候需要注意這個(gè)問(wèn)題(哈哈!!! 如果要兼容太多低版本瀏覽器 我感覺(jué)是浪費(fèi)生命的事情 ! )
如何使用
/*---------- defineProperty 基本使用 ------------*/
let obj = {}
let name = 'zhangsan'
Object.defineProperty(obj, 'name', {
get: function () {
console.log('get')
return name
},
set: function (newValue) {
console.log('set')
name = newValue
}
})
console.log(obj.name)
obj.name = 'lisi'
// 輸出
// get
// zhangsan
// set
我們對(duì)obj對(duì)象屬性進(jìn)行g(shù)et和set的時(shí)候都用了方法來(lái)實(shí)現(xiàn)袋坑，這只是一個(gè)基本的使用
模擬實(shí)現(xiàn)Vue響應(yīng)式
代碼
// 模擬實(shí)現(xiàn)Vue響應(yīng)式
let vm = {} // 我們把這個(gè)看做是Vue的一個(gè)實(shí)例
// data看作是Vue實(shí)例的data屬性
let data = {
price:100,
name:'zhangsan'
}
let key, value
for (const key in data) {
if (data.hasOwnProperty(key)) {
(function(key){
Object.defineProperty(vm,key,{ // 將data屬性代理到vm上
get:function(){
console.log('get',data[key]) // 監(jiān)聽(tīng)
return data[key]
},
set:function(newValue){
console.log('set',newValue) // 監(jiān)聽(tīng)
data[key] = newValue
}
})
})(key)
}
}
console.log(vm.name)
這樣就簡(jiǎn)單的實(shí)現(xiàn)了一個(gè)Vue的響應(yīng)式原理仗处，這里只是簡(jiǎn)單的模擬，以后還會(huì)更加深入去了解枣宫。
