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

最新推荐文章于 2024-05-16 21:23:56 发布

段友吊缠腰

最新推荐文章于 2024-05-16 21:23:56 发布

阅读量396

点赞数 1

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

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

版权

vue 同时被 2 个专栏收录

29 篇文章 2 订阅

订阅专栏

前端

25 篇文章 0 订阅

订阅专栏

带薪摸鱼：手写一下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>

段友吊缠腰

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue2和vue3两者的响应式核心原理区别

带薪摸鱼：手写一下vue2和vue3的响应式核心原理vue2：<body> <div> <input type="text" id="input"> <span id="text"></span> </div> <script> var obj = {}; Object.defineProperty(obj, 'prop', { ge
复制链接

扫一扫