手写 vue3 Proxy reactive 双向绑定原理

拼搏现实的明天。 2022-09-15 05:51 169阅读 0赞

### Proxy 代理对象 ###

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv6YWx57Sr_size_20_color_FFFFFF_t_70_g_se_x_16]

--------------------

### 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标签的内容也会改变  
![在这里插入图片描述][3a1027d9455445e1b4d56db5c983b23b.png]

--------------------

### 封装 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>

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv6YWx57Sr_size_15_color_FFFFFF_t_70_g_se_x_16]

--------------------

### 手写 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>

![在这里插入图片描述][3986a4df063948c09531614860d519ce.png]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv6YWx57Sr_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/e3be5899adec4beb9b064c9f53a822c6.png
[3a1027d9455445e1b4d56db5c983b23b.png]: /images/20220828/0c40b5bc82a2465bb0f24568dac4fe85.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv6YWx57Sr_size_15_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/8d3eecd87e5740b1ad39f23bd12ec499.png
[3986a4df063948c09531614860d519ce.png]: /images/20220828/5a38af8379f84509b6e8145d42f375c3.png