0
点赞
收藏
分享

微信扫一扫

Vue:响应式数据和副作用函数


副作用函数,就是该函数的执行会影响到其他函数的函数,比如有一个函数effect,它设置body的文本内容。然而其他函数可以设置和读取body的文本内容。那么effect函数的执行,会直接或者间接影响到其他函数,这就是effect产生的副作用。

在一个副作用函数中读取了一个对象 的属性:

const object = {name:'duxin'};
function effect(){
document.body.innerText = object.name
}

当对象属性值发生变化的时候,希望副作用函数会重新执行,而且自动执行,这就是响应式数据,完整代码:

<!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>
<script>
const bucket = new Set();
const data = { name: 'duxin' };


const obj = new Proxy(data, {
// 拦截读取操作
get(target, key) {
bucket.add(effect);
return target[key];
},
// 拦截设置操作
set(target, key, newVal) {
target[key] = newVal;
bucket.forEach(fn => fn());
return true
}
})
function effect() { document.body.innerText = obj.name }
effect()

setTimeout(() => {
obj.name = "0897"
}, 2000)
</script>
</body>

</html>

当我们修改对象属性值时,effect自动执行。这就是响应数据的工作原理。


举报

相关推荐

0 条评论