首页 > 其他 > 详细

es6 Proxy 简写 Vue3.0 的双向绑定

时间:2020-12-12 18:18:07      阅读:34      评论:0      收藏:0      [点我收藏+]

小小实习生,大佬请赐教

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="input">
    <p id="text">hello world</p>

    <script>
        let input = document.getElementById(input);
        let text = document.getElementById(text);

        let obj = {};

        // Proxy 第一个参数 要拦截的目标对象,这里指 obj, 第二个参数 处理程序对象 这里直接 {} 并定义 get、set 捕获器
        let proxy = new Proxy(obj, { 
            // get 第一个参数 目标对象,这里指 obj,第二个参数 属性,这里指 val
            get(target, property){
                return target[property]; // 红宝书上说 返回值无限制
            },
            // set 前两个参数 同 get, 第三个参数是 要设置的值
            set(target, property, value){ 
                target[property] = value; // 相当于 obj[val] = 5;
                text.innerText = target[property]; // 把值 赋值给 text
                return; // set 的返回值 true 表示成功 false 表示失败 
            }
            
        })

        /*
        默认先把 text 值 赋值给 input
        */
        proxy.val = text.innerText;
        input.value = proxy.val;

        // input 输入时触发
        input.addEventListener(input, function(){
            proxy.val = this.value; // 给 proxy.val 赋值 会调用 set 捕获器
        })
    </script>
</body>
</html>

 

es6 Proxy 简写 Vue3.0 的双向绑定

原文:https://www.cnblogs.com/brotheryang/p/14125073.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!