用Proxy模拟VUE中的数据双向绑定

最新推荐文章于 2022-12-09 16:49:12 发布

longWinter666

最新推荐文章于 2022-12-09 16:49:12 发布

阅读量463

点赞数 2

分类专栏： vue 文章标签：前端 vue 双向数据绑定

本文链接：https://blog.csdn.net/wu1737149371/article/details/88398628

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”（meta programming），即对编程语言进行编程。
Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。
详细介绍也不多说了直接上代码 Proxy详细原理与介绍请看阮一峰ES6入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- 首先模拟出vue中写法 -->
    <div id="div1">
        <input type="text" v-model="name"><br>
        姓名：{{name}}<br>
        年龄：{{age}}
    </div>
</body>
<script>
    //获取DOM元素,类似于挂载点
    let el=document.getElementById('div1');
    //存一下当前html结构
    let template=el.innerHTML;
    //定义一个json
    let _data={
    name: 'wuchangdong',
    age: 18
    };
    //用Proxy来监听当前json是否改变
    let data=new Proxy(_data,{
        set(obj,name,value){
            obj[name]=value;
            //数据变了
            console.log(`当前${name}的值为${value}`);
            //调用渲染函数
            render();
        }
    });
    render();
    //渲染函数
    function render(){
        //用正则找出所有这种{{}}结构并将其变为我们的数据
        el.innerHTML=template.replace(/\{\{\w+\}\}/g,str => {
             str=str.substring(2, str.length-2);
            return _data[str];
        });
        //找出input中所有的v-model
        Array.from(el.getElementsByTagName("input"))
        .filter(ele=>ele.getAttribute("v-model"))
        .forEach(input=>{
            let name=input.getAttribute('v-model');
            input.value=_data[name];
            //监听输入事件
            input.oninput=function(){
                //这里一定是data不是_data
                data[name]=this.value;
            };
        });
    };
</script>
</html>

效果如下

当然这只是其中一种方法简单的实现这个双向数据绑定，小伙伴们可以自行研究

longWinter666

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用Proxy模拟VUE中的数据双向绑定

Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”（meta programming），即对编程语言进行编程。Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。详细介绍也...
复制链接

扫一扫