什么是副作用函数?
const obj = {
text: \\\'hello world\\\'
}
//副作用函数
function effect() {
// effect 函数的执行,会读取 obj.text 的值,页面输出 hello world
document.body.innerText = obj.text
}
obj.text = \\\'hello Vue\\\'
const obj = new Proxy(data,{
get(target, key){
//读取操作
},
set(target, key, newVal){
//设置操作
}
})
//存储副作用函数的桶
const bucket = new Set()
//原始数据
const data = {
text: \\\'hello world\\\'
}
//对原始数据做代理
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())
//返回 true,表示代理成功
return true
}
})
//副作用函数
function effect() {
document.body.innerText = obj.text
}
//执行副作用函数,触发读取
effect()
//1秒后修改响应数据
setTimeout(() => {
obj.text = \\\'hello Vue3\\\'
}, 1000)
图片授权基于 www.pixabay.com 相关协议
文章内容来源于《Vue.js 设计与实现》
原创文章,作者:小道研究,如若转载,请注明出处:https://www.sudun.com/ask/34573.html