手写 vue3 Proxy reactive 双向绑定原理

最新推荐文章于 2023-07-16 15:31:26 发布

前端酱紫

最新推荐文章于 2023-07-16 15:31:26 发布

阅读量502

点赞数

分类专栏： vue3.0 文章标签： javascript html vue3

本文链接：https://blog.csdn.net/wuj1935/article/details/120680947

版权

vue3.0 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

Proxy 代理对象

在这里插入图片描述

Vue3 Proxy 双向绑定原理

一定要触发set，才能够修改到界面的数据。
因为Object.defineproperty 如果对象是数组，不会触发set，所以在vue2.0中，数组并不是响应式的。
因为new Proxy 可以对数组进行代理，修改数组中数据的时候，也会触发set，一旦触发set，就可以在set中修改界面的数据，做到响应式效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="ipt">
    <p id="op"></p>
    <script>
        let obj = { txtVal: '输入框的默认值' }

        let newObj = new Proxy(obj, {
            get(target, property) {
                console.log("target", target);
                console.log("property", property);
                return target[property]
            }
        })

        ipt.value = newObj.txtVal 
        op.innerHTML = newObj.txtVal
        addEventListener('input', (e) => {
            console.log(e.target.value);
            op.innerHTML = e.target.value
        })
    </script>
</body>
</html>

手动输入内容 p标签的内容也会改变
在这里插入图片描述

封装 myReactive


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="ipt">
    <p id="op"></p>
    <script>
        let obj = { txtVal: '输入框的默认值' }
        
        function myReactive(obj) {
            return new Proxy(obj, {
                get(target, property) {
                    return target[property]
                },
                set(target, property, newValue) {
                    ipt.value = newValue; // 输入框的值
                    op.innerHTML = newValue // p标签展示的值
                }
            })
        }
        let newO = myReactive(obj);
        addEventListener('input', (e) => {
            newO.txtval = e.target.value
        })
    </script>
</body>
</html>

在这里插入图片描述

手写 vue3 reactive

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="ipt">
    <p id="op"></p>
    <script>
        let obj = { txtVal: '输入框的默认值' } 
        
        function myReactive() {
            return new Proxy(obj, {
                get(target, property) {
                    return target[property]
                }
            })
        }
        myReactive(obj)
        ipt.value = obj.txtVal
        op.innerHTML = obj.txtVal
    </script>
</body>

</html>

在这里插入图片描述

前端酱紫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
手写 vue3 Proxy reactive 双向绑定原理

vue3 Proxy 双向绑定原理<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
复制链接

扫一扫