什么是响应式数据？
所谓的响应式数据就是说,数据发生改变的时候,视图会重新渲染,匹配更新为最新的值。
vue2的响应式数据式是基于ES5的Object.defineProperty实现的，而vue3的响应式数据是基于ES6的Proxy来实现的。
下面我们基于ES6中的Proxy来实现一个非常基本的数据响应的功能。
完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<script type="text/javascript">
//定义一个Set用于保存副作用函数
const bucket=new Set();
//定义一个数据对象
const data={text:'hello world'};
//定义一个副作用函数修改body显示的文本
function effect(){
document.body.innerText=obj.text;
}
//定义一个Proxy对象 用于拦截读取和获取数据的操作
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;
}
});
//运行副作用函数
effect();
//设置定时器 一秒钟以后修改body的文本为hello vue2
setTimeout(()=>{
obj.text="hello vue3";
},1000);
</script>
</head>
<body>
</body>
</html>运行效果：
刚打开页面
一秒钟之后修改了对象的数据之后，页面也会同时修改：
0条评论
点击登录参与评论