<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue3的响应式原理</title>
</head>
<body>
<script type="text/javascript">
// 源数据
let person = {
name: '张三',
age: 18
}
// 模拟Vue2中实现响应式
/* let p = {}
Object.defineProperty(p, 'name', {
configurable: true,
get() { // 有人读取name时调用
return person.name
},
set(value) { // 有人修改name时调用
console.log('有人修改了name属性,我发现了,我要去更新界面!')
person.name = value
}
})
Object.defineProperty(p, 'age', {
get() { // 有人读取age时调用
return person.age
},
set(value) { // 有人修改age时调用
console.log('有人修改了age属性,我发现了,我要去更新界面!')
person.age = value
}
}) */
// 模拟Vue3中实现响应式
const p = new Proxy(person, {
// 有人读取p的某个属性时调用
get(target, propName) {
console.log(`有人读取了p身上的${
propName}属性`)
return Reflect.get(target, propName)
},
// 有人修改p的某个属性、或给p追加某个属性时调用
set(target, propName, value) {
console.log(`有人修改了p身上的${
propName}属性,我要去更新界面了!`)
Reflect.set(target, propName, value)
},
// 有人删除p的某个属性时调用
deleteProperty(target, propName) {
console.log(`有人删除了p身上的${
propName}属性,我要去更新界面了!`)
return Reflect.deleteProperty(target, propName)
}
})
let obj = {
a: 1,
b: 2
}
// 通过Object.defineProperty去操作
/* try {
Object.defineProperty(obj, 'c', {
get() {
return 3
}
})
Object.defineProperty(obj, 'c', {
get() {
return 4
}
})
} catch (error) {
console.log(error)
} */
// 通过Reflect.defineProperty去操作
const x1 = Reflect.defineProperty(obj, 'c', {
get() {
return 3
}
})
console.log(x1) // true
const x2 = Reflect.defineProperty(obj, 'c', {
get() {
return 4
}
})
if (x2) {
console.log('某某某操作成功了!')
} else {
console.log('某某某操作失败了!') // 某某某操作失败了!
}
console.log('@@@') // @@@
</script>
</body>
</html>
VUE3-响应式原理(5)
猜你喜欢
转载自blog.csdn.net/gty204625782/article/details/123219492
今日推荐
周排行