v-model数据双向数据绑定原理

Dear 丶 2022-01-23 01:13 341阅读 0赞

# vue中实现数据双向绑定 #

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <div id="app">
        <input type="text" v-model="msg">
        <div class="test" v-text="msg"></div>
    </div>
    <body>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({ 
            el:"#app",
            data:{ 
                msg:'a'
            }
        })
    </script>
    </body>
    </html>

## 原生js实现原理 ##

*  需要用到的api

Object.defineProperty(obj, prop, desc)
    
        obj 需要定义属性的当前对象
        prop 当前需要定义的属性名
        desc 属性描述符

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <input type="text" class="input">
    <div class="test" ></div>
    </body>
    </html>
    <script>
        var obj={ 
            a:1
        }
        var writeDom = document.querySelector('.input')
        var showDom = document.querySelector('.test')
        Object.defineProperty(obj,"txt",{ 
            get:function(){ 
                return obj;
            },
            set:function(value){ 
                showDom.innerHTML=value;
            }
        });
        writeDom.addEventListener("keyup",function(e){ 
            obj.txt=e.target.value;
        })
    </script>

*  get  
    输出的时候会自动通过原型链调用get方法
 *  set  
    写入的时候给obj.a赋值的时候会自动调用set方法
 *  set