vue 响应性Object.defineProperty和new Proxy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- <input type="text" inputmode="email" accesskey="b" tabindex="1"> -->
<h3 id="firstname"></h3>
<h3 id="lastname"></h3>
<h3 id="age"></h3>
<script>
let user = {
name: '大海一',
age: 12
}
function getFristName() {
document.getElementById('firstname').innerText = user.name[0]
}
function getLastName() {
document.getElementById('lastname').innerText = user.name.slice(1)
}
function getAge() {
document.getElementById('age').innerText = user.age
}
function observe(obj) {
for (let key in obj) {
let initVal = obj[key]
let keyFuns = []
Object.defineProperty(obj, key, {
get() {
if (window.__fun && !keyFuns.includes(window.__fun)) {
keyFuns.push(window.__fun)
}
return initVal
},
set(val) {
initVal = val
keyFuns.forEach(fun => fun())
}
})
}
}
function observeProxy(obj) {
let keyFuns = []
user = new Proxy(obj, {
get(target, prop) {
if (window.__fun && !keyFuns.includes(window.__fun)) {
keyFuns.push(window.__fun)
}
return target[prop]
},
set(target, prop, value) {
target[prop] = value
keyFuns.forEach(fun => fun())
}
})
}
//observe(user)
observeProxy(user)
function runFun(fun) {
window.__fun = fun
fun()
window.__fun = null
}
runFun(getFristName)
runFun(getLastName)
runFun(getAge)
</script>
</body>
</html>
