欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

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

程序员文章站 2022-07-12 22:32:16
...
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>

简单的实现了数据双向绑定，写的不好请笑纳

相关标签： vue javascript proxy js vue.js

上一篇： vue3.0响应式数据是如何实现的？相比vue2.0中Object.defineProperty()有什么优势？

下一篇： Vue、angular等框架实现双向绑定的原理，核心机制是使用了Object.defineProperty

推荐阅读