ES6中基于Proxy实现的响应式数据-青岛软件培训-Java培训-Python培训学校-万码学堂

2022-12-14 12:00

ES6中基于Proxy实现的响应式数据

少尉

WEB前端

(412)

(0)

什么是响应式数据？

所谓的响应式数据就是说,数据发生改变的时候,视图会重新渲染,匹配更新为最新的值。

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>

运行效果：

刚打开页面