如何使用Proxy与Reflect实现简单的双向数据绑定

即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化。 

  1. 获取dom对象
  2. 设置代理对象
  3. 配置代理选项
  4. 添加事件
  5. 实现双向数据绑定
{
    // 获取dom元素
    const txt = document.getElementById('txt')//span
    const inp = document.querySelector('#inp');//input
    // 初始化代理对象
    const obj = {}
    // 代理选项
    const handle = {
        get(target, key) {
            console.log('get');
            return Reflect.get(target, key)
        },
        set(target, key, value) {
            修改一下前端页面,让input标签里的值事实变化,把span标签也修改一下
            if (key === 'text') {
                inp.value = inp.value === value ? inp.value : value
                txt.innerHTML = value
            }
            //更新OBJ
            //前端页面改了,对象也要修改
            return Reflect.set(target, key, value)
        }
    }
    //创建具体的代理
    let objProxy = new Proxy(obj, handle)
    //监听input的状态
    inp.addEventListener('keyup', function (e) {
        objProxy.text = e.target.value//e.target相当于input
        console.log(obj);
    })
    objProxy.text = 1234567890
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值