Vue.js 响应式数据的原理

最新推荐文章于 2024-05-14 11:33:30 发布

Buildy_j

最新推荐文章于 2024-05-14 11:33:30 发布

阅读量85

点赞数

分类专栏： #Vue面试题面试题文章标签： vue.js html javascript

本文链接：https://blog.csdn.net/qq_39280289/article/details/120519668

版权

面试题同时被 2 个专栏收录

47 篇文章 1 订阅

订阅专栏

#Vue面试题

18 篇文章 1 订阅

订阅专栏

这篇博客探讨了如何利用JavaScript的Object.defineProperty和Proxy来操控DOM元素的默认行为。通过示例，展示了如何创建一个响应式的文本输入，使得输入框的值与段落文本同步更新，同时讲解了两者的使用方法和区别。

摘要由CSDN通过智能技术生成

核心：Object.defineProperty 或 Proxy类 去操作底层默认行为。

Object.defineProperty 简单版：

/*html
...

    <body>
        <p>请输入:</p>
        <input type="text" id="input">
        <p id="p"></p>
    </body>

    <script>
        const input = document.getElementById('input');
        const p = document.getElementById('p');
        
        Object.defineProperty(p, 'text', {
            configurable: true,
            enumerable: true,
            get() {
                return p.innerHTML;
            },
            set(newVal) {
                p.innerHTML = newVal;
                input.value = newVal;
                return newVal;
            }
        })
        input.addEventListener('keyup', (e) => {
            p.text = e.target.value;
        }, false)
    </script>


...    
*/

Proxy类 简单版：

/*html
...

    <body>
        <p>请输入:</p>
        <input type="text" id="input">
        <p id="p"></p>
    </body>

    <script>
        const input = document.getElementById('input');
        const p = document.getElementById('p');
        
        const newObj = new Proxy(p, {
            get: function (target, key, receiver) {
                return Reflect.get(target, key, receiver);
            },
            set: function (target, key, value, receiver) {
                if (key === 'text') {
                    input.value = value;
                    target.innerHTML = value;
                }
                return Reflect.set(target, key, value, receiver);
            },
        });
        input.addEventListener('keyup', function (e) {
            newObj.text = e.target.value;
        },false);
    </script>

...    
*/