vue2的響應(yīng)式
核心:
對象: 通過defineProperty對對象的已有屬性值的讀取和修改進行劫持(監(jiān)視/攔截)
數(shù)組: 通過重寫數(shù)組更新數(shù)組一系列更新元素的方法來實現(xiàn)元素修改的劫持
//vue2響應(yīng)式核心代碼 略。。。（木空寫了o(╥﹏╥)o）
Object.defineProperty(data, 'count', {
get () {},
set () {}
})
proxy代理對象參考網(wǎng)址：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy
Reflect反射對象參考網(wǎng)址：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy
vue3 響應(yīng)式核心
<script type="text/javascript">
const user = {
name:'佐助',
age:20,
wife:{
name:'小櫻',
age:19
}
}
//把目標對象編程代理對象的過程,使用proxy代理對象代理該目標對象，并且使用Reflect反射對象反射出去
//參數(shù)1：user ---> target 目標對象
//參數(shù)2：handler --->處理器對象，內(nèi)置了許多方法 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy，用來監(jiān)視數(shù)據(jù)，及這個數(shù)據(jù)的操作
const proxyUser = new Proxy(user,{
//獲取目標對象的某個數(shù)據(jù)
get(target, property){
console.log('get方法調(diào)用了嗎')
return Reflect.get(target, property) //通過反射對象將數(shù)據(jù)反射出去
},
//修改或添加目標對象的某個數(shù)據(jù)
set(target, property, value){
console.log('set對象調(diào)用了嗎')
return Reflect.set(target, property, value) //調(diào)用反射對象將數(shù)據(jù)反射到目標對象上
},
//刪除某個目標對象
deleteProperty(target, property){
console.log('deleteProperty調(diào)用了嗎')
return Reflect.deleteProperty(target, property)
},
})
console.log(proxyUser.name)
proxyUser.gender = '男'
console.log('添加后的代理對象是===',proxyUser)
//刪除操作
delete proxyUser.name
console.log('刪除后的代理對象是===',proxyUser)
</script>
