使用new Proxy实现vue数据双向绑定原理

ゝ一纸荒年。 2022-12-07 12:26 185阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    
    <body>
        <input type="text" v-model="content">
        <input type="text" v-model="title">
        <input type="text" v-model="title">
        <h4 v-bind="content">这里也会发生更新</h4>
        <h4 v-bind="title"></h4>
    </body>
    
    </html>
    <script>
        function View() {
            let proxy = new Proxy(
                {}, {
                set(target,property,value) {
                    const ele=document.querySelectorAll(`[v-model=${property}]`);
                    ele.forEach((item)=>{
                        item.value=value;
                    })
                    const eleBind=document.querySelectorAll(`[v-bind=${property}]`);
                    eleBind.forEach((item)=>{
                        item.innerHTML=value;
                    })
                },
                get(target,property) {
    
                }
            }
            )
            this.init=function(){
                const ele=document.querySelectorAll('input');
                ele.forEach((item)=>{
                    item.addEventListener('keyup',function(){
                        proxy[this.getAttribute('v-model')]=this.value
                    })
                })
            }
        }
        new View().init()
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，185人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue 双向数据绑定原理分析

1.vue双向绑定原理 vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，gette

叁歲伎倆/ 2023年06月13日 09:07/ 0 赞/ 145 阅读

相关 Vue双向数据绑定原理

Vue双向数据绑定原理前端面试必问的一道面试题 vue采用MVVM模式，数据劫持结合开发者-订阅者模式，通过Object.defineProperty()劫持各个属

淩亂°似流年/ 2022年12月18日 14:57/ 0 赞/ 178 阅读

相关 vue实现数据双向绑定

Vue.js 是采用 Object.defineProperty 的 getter 和 setter，并结合观察者模式来实现数据绑定的。　当把一个普通 Javascrip

分手后的思念是犯贱/ 2022年12月11日 03:12/ 0 赞/ 275 阅读

相关使用new Proxy实现vue数据双向绑定原理

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

ゝ一纸荒年。/ 2022年12月07日 12:26/ 0 赞/ 186 阅读

相关手写 vue3 Proxy reactive 双向绑定原理

Proxy 代理对象 ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiB

拼搏现实的明天。/ 2022年09月15日 05:51/ 0 赞/ 164 阅读

相关 vue实现双向绑定原理

原理： vue主要是借助对象的访问器属性（Object.defineProperty）劫持数据，并结合订阅者-发布者模式来实现数据双向绑定。通过Object.defi

╰半橙微兮°/ 2022年05月27日 04:26/ 0 赞/ 273 阅读

相关 Vue 双向数据绑定原理

vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过`Object.defineProperty()`来劫持各个属性的`setter`，`getter`

曾经终败给现在/ 2022年03月11日 05:37/ 0 赞/ 365 阅读

相关 vue双向数据绑定原理

前言 > 这个解答可回答面试中 ① vue双向数据绑定原理和 ② vue响应原理问题基本原理 vue.js 是采用数据劫持结合发布者-订阅者模式的方

你的名字/ 2022年01月31日 16:59/ 0 赞/ 312 阅读

相关 vue实现数据双向绑定原理实现

直接上代码吧： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

蔚落/ 2022年01月30日 11:49/ 0 赞/ 328 阅读

相关 vue双向数据绑定原理

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

拼搏现实的明天。/ 2021年07月26日 22:52/ 0 赞/ 572 阅读