vue2和vue3两者的响应式核心原理区别

最新推荐文章于 2024-10-09 21:42:19 发布

段友吊缠腰

最新推荐文章于 2024-10-09 21:42:19 发布

阅读量421

点赞数 1

分类专栏： vue 前端文章标签： vue.js javascript html5 css3

本文链接：https://blog.csdn.net/qq_43586648/article/details/113771921

版权

vue 同时被 2 个专栏收录

28 篇文章 2 订阅

订阅专栏

前端

24 篇文章 0 订阅

订阅专栏

本文通过手写代码的方式详细介绍了Vue2和Vue3中响应式原理的核心实现方式。对于Vue2，使用了`Object.defineProperty`来劫持属性的读取和设置；而对于Vue3，则采用了`Proxy`来实现对对象属性的拦截和定制。通过这两个实例，读者可以更好地理解Vue不同版本间响应式机制的变化。

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

带薪摸鱼：手写一下vue2和vue3的响应式核心原理

vue2：

<body>
    <div>
        <input type="text" id="input">
        <span id="text"></span>
    </div>
    <script>
    var obj = {};
    Object.defineProperty(obj, 'prop', {
        get: function () {
            return val;
        },
        set: function (newVal) {
            val = newVal;
            document.getElementById('text').innerHTML = val;
        }
    });
    document.addEventListener('keyup', function (e) {
        obj.prop = e.target.value;
    });
</script>
</body>

vue3：

<body>
    <div>
        <input type="text" id="input">
        <span id="text"></span>
    </div>
</body>
<script>
    var obj = {};
    var obj1 = new Proxy(obj, {
        get: function (target, key, receive) {
            return target[key];
        },
        set: function (target, key, newVal, receive) {
            target[key] = newVal;
            document.getElementById('text').innerHTML = target[key];
        }
    })
    document.addEventListener('keyup', function (e) {
        obj1[0] = e.target.value;
    });
</script>