VUE中的双向数据绑定

1.原理
vue中可以通过v-model指令实现双向数据绑定,那么在vue底层中是如何实现的呢?

其实是使用了es5中的Object.defineProperty()实现的

2.Object.defineProperty()
此方法的作用: 它可以直接在一个对象上定义一个新的属性,或者修改一个对象的现有属性,并且返回这个对象
语法:Object.defineProperty(obj,prop,descriptor)
obj:要在其中定义属性的对象
prop:要定义或修改的属性的名称
descriptor:将被定义或者修改的描述符
然后参数中重点就是最后的描述符

var obj = {}
Object.defineProperty(obj,'val',{
	value:123
})

注意:默认情况下这样给对象赋值是无法被更改的

3.如何更改?

在定义时可以在赋值时添加一个属性writable为true时,value才能被赋值运算符改变

ar obj = {};
Object.defineProperty(obj, 'val', {
value: 123,
writable:true,
});

Object.defineProperty(obj, 'val1', {
value: 12366,
writable:true,
});

obj.val=6666  //修改val的值

get: 一个属性提供getter的方法,当访问一个对象的时候该方法会被执行

set: 一个属性提供的setter方法,当属性值被改变时就会执行这个方法,该方法接收一个参数,即是该属性的新值

var o = {}; // 创建一个新对象
// 在对象中添加一个属性与存取描述符的示例
var bValue;
Object.defineProperty(o, "b", {
get: function () {
console.log("获取了值:", bValue)
return bValue;
},
set: function (newValue) {
console.log("设置了新值:", newValue)
bValue = newValue;
},
});

模拟v-model指令实现双向绑定

核心代码:

    <input v-model="value" />
    <p zl-model="value"></p>
<script>
//代码演示:defineProperty的双向绑定
var obj = {};
Object.defineProperty(obj, 'val', {
    set: function (newVal) {
    var list = document.querySelectorAll("[v-model=value]");
    for (let i = 0; i < list.length; i++) {
    if (list[i].nodeName == "INPUT") list[i].value = newVal == undefined ? '' : newVal;
    else list[i].innerHTML = newVal == undefined ? '' : newVal;
    }
    },
    get: function () {
    return document.querySelector("[v-model=value]").value;
    }
    });
    document.querySelector("[v-model=value]").addEventListener("input", function (e) {
    obj.val = e.target.value;
    })
</script>

总结:VUE实现双向数据绑定的原理,利用了object.defineProperty()重新定义了获取对象属性值(get)和设置属性值(set)的操作来实现

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值