简单实现Vue2.0(Object.defineProperty)和Vue3.0(Proxy)的数据双向绑定

最新推荐文章于 2024-08-01 16:56:19 发布

一点都不想学

最新推荐文章于 2024-08-01 16:56:19 发布

阅读量246

点赞数 2

文章标签： vue javascript proxy js vue.js

本文链接：https://blog.csdn.net/m0_53538943/article/details/118422134

版权

vue2中通过Object.defineProperty实现数据双向绑定

<body>

    <input type="text" id="ipt" >
    <h1 id="h1"></h1>

    <script>
        
        let obj = { val:"" }
        
        //每次修改obj对象中的val会造成死循环，所以我们需要定义一个新对象作为中间人
        let newobj = JSON.parse(JSON.stringify(obj))

        //三个参数第一个是我们要监听的对象、第二个是我们要监听的属性、第三个就是我们的get和set方法
        Object.defineProperty( obj, 'val', {
            
            get: function () {
                return newobj.val
            },
            set: function (val) {
                newobj.val = val
                objserve()
            }
        } )

        function objserve () {
            ipt.value  = obj.val
            h1.innerHTML = obj.val
        }

        ipt.oninput = function () {
            obj.val = this.value
        }

    </script>
</body>

vue3中通过Proxy实现数据双向绑定

<body>

    <!-- input标签 -->
    <input type="text" id="ipt">
    <!-- 展示内容 -->
    <h1 id="h1"></h1>

    <script>
        
        //双向绑定的属性
        let obj = { val : '' }

        //两个参数、proxy不需要指定属性、它可以监听对象里面的所有属性
        obj = new Proxy( obj, {
            
            //获取属性值
            //target就是我们绑定的对象、prop是我们要获取的属性、第三个proxy参数是可选的(我们监听的对象实例)
            get: function ( target, prop, proxy ) {
                return target[prop]
            },

            //修改属性值
            //set有四个参数、target就是我们绑定的对象、prop是我们要获取的属性、第三个是我们要修改的属性值、第四个proxy参数是可选的(我们监听的对象实例)
            //相对于get方法多了一个属性值
            set: function ( target, prop, val ) {
            	//将我们要修改的属性进行赋值
                target[prop] = val
                //将obj.val绑定给input框的value
                //并把内容展示到了页面
                objserve()
            }

        } )

        //修改属性值后调用的方法
        function objserve () {
            ipt.value = obj.val
            h1.innerHTML = obj.val
        }

        //给输入框绑定输入事件
        ipt.oninput = function () {
            obj.val = this.value
        }

    </script>
</body>