Vue的双向绑定 v-model的原理

Vue的双向绑定 v-model的原理

使用V-model进行绑定

v-model的效果就是用户在输入的时候实际上实在修改txtVal的值,修改成用户输入的内容

<input type="text" v-model="txtVal">
<p>{{txtval}}</p>

 

使用ES6进行绑定

<input type="text" @input="inputChange"  :value="txtval">
<p>{{txtval}}</p>
  • @input 输入事件,每次输入了新的元素,即为进行触发

  • :value 活化其value值

在模型层的方法

methods:{
      inputChange(e){
          this.txtval=e.target.value}
      }

 

vue.js通过object.defineProperty()实现双向数据绑定

使用Object.defineProperty()进行绑定

语法:object.defineProperty(对象,属性,配置)

let obj={}   //创建对象
//内置对象需要大写
Object.defineProperty(obj,"c",{
           //进行对于obj自定义属性,C进行配置
           value:150,    //配置其值
           writable:true,  //表示可以进行更改
           configurable:true, //表示可以进行删除
           enumerable:true   //表示可以进行遍历
      })

       obj.c=250    //进行更改
       delete obj.c   //进行删除

       // 进行遍历:var i in obj 遍历出其中所有的元素
       for(var i in obj){
           console.log( "obj中含有的元素是",i)
      }

使用get() set()方式进行配置 (!!主流)

Object.defineProperty(obj,"c",{
//注意!getset与设置value,writable等存在冲突,无法同时使用
           get(){
               //get中的return就设置了使用get时的 b的值
               return 100
          },
           set(val){
        //在set中绑定形参val,就会在调用set时把数值流入set方法之中
               console.log("调用了set",val);//"调用了set",1000
          }})

       obj.b=1000         //修改b的值进行触发set方法
       console.log(obj.b); //访问b的值,触发get方法

 

Object.defineProperty()的原理

双向数据绑定的原理:借助Object.defineProperty()对数据进行劫持,并结合发布-订阅者模式,来实现双向数据绑定

hc:

    <input type="text" id="inp">
   <p id="txt"></p>

js:

        let data={info:"hello"}//模拟new Vue中的data属性 

       let vm={} //模拟一个Vue的实例化对象
       Object.defineProperty(vm,"info",{  
           get(){
               //获取到data仓库中的值并且向外部返回
               return data.info
          },
           set(val){
               //set事件进行了数据劫持,劫持到了要修改的数据为val形参
               data.info=val  
               document.getElementById("txt").innerHTML=vm.info
          }
      })

       //将data中的数据静态绑定在视图层 即为 input与p当中
       //更新dom以用于显示数据   [订阅者 p]
       document.getElementById("inp").value=vm.info
       document.getElementById("txt").innerHTML=vm.info

       //给文本框绑定一个事件监听,以用于属于事件的操作
       //addEventListener("操作的事件",处理的函数)
document.getElementById("inp").addEventListener("input",function(e){
    //获取页面的最新值,并且更新到vm.info之上[发布者,发布最新的数据]
           vm.info=e.target.value
      })
  1. 访问到info时,就会触发get函数

  2. 当设置修改了info的时候,触发了set函数.形参val就会传进函数内进行对绑定了的data的值进行修改

  3. 通过事件监听,当调用到set方法时,添加动态更新数据,更新data.info为输入的值

  4. 此时在set方法中再次调用get方法,使得新的值更新在视图之中

 

 

 

结论

v-model本质上只是语法糖,是由

 :value="txtVal" @input="txtVal=$event.target.value"

组成了v-model

即为方法也可以写成行内事件

<input type="text" :value="txtVal" @input="txtVal=$event.target.value" placeholder="初始值">

 

posted @ 2022-10-26 23:24  Dollom  阅读(335)  评论(0)    收藏  举报