VUE：双向绑定的原理和实现(浅谈)

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

vue数据双向绑定原理

VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的

之后我们先来看这个参数，参数的详细用法在这里 点击这里阅读详细用法

这里我们大概说一参数的用法

参数

Object.defineProperty() 接收三个参数

  1. 要操作的对象

  2. 要定义或修改的对象属性名

  3. 属性描述符

属性描述符

参数中重点就是最后的属性描述符。属性描述符是一个对象，主要有两种形式：

①数据描述符形式的对象

value

定义该属性对应的值。可以是任何有效的JavaScript 值（数值，对象，函数等）

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


但是这里obj.val的值却没有办法更改，这是因为defineProperty()方法内部的属性描述符中的writable在默认情况下是为false，在外部不能修改属性的值
writable

定义此属性是否允许被更改。当且仅当该属性的writable为true时，value才能被赋值运算符改变

下面我们在上面的代码中将writable的值改为true

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

②存取描述符形式的对象

get

一个给属性提供 getter 的方法，当访问该属性时，该方法会被执行。（类似于计算属性的get形式）
set

一个给属性提供 setter 的方法，当属性值修改时，触发执行该方法。该方法将接受唯一参数，即该属性新的参数值。（类似于计算属性的set形式）

var obj = {}; //创建一个新对象
//在对象中添加一个属性与存取描述符的示例
var testValue;  //用于存储临时的值
Object.defineProperty(obj,'testValue',{
    get:function(){		//获取obj.testValue的值时执行的方法
        console.log('获取了值',testValue);
        return testValue;
    },
    set:function(newValue){		//设置obj.testValue的值时执行的方法
        console.log('设置了值',newValue);
        testValue = newValue;
    }
});

③数据描述符和存取描述符均具有的键值：

configurable

当且仅当该属性的 configurable 为 true 时，该属性描述符才能够被改变，同时该属性也能从对应的对象上被删除


enumerable

当且仅当该属性的enumerable为true时，该属性才能够出现在对象的枚举属性中

双向绑定实现示例

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>双向绑定</title>
</head>
<body>
    <input type="text" id="ipt">
    <p id="p"></p>
    <script>
        //代码演示：defineProperty的双向绑定
        var obj = {};
        Object.defineProperty(obj,'val',{
            set:function(newValue){
                //这里用对传入的值进行了判断
                document.getElementById('ipt').value = newValue == undefined ? '' : newValue;   
                document.getElementById('p').innerHTML = newValue == undefined ? '' : newValue;
            }
        })
    </script>
</body>
</html>

模拟指令实现双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <input zl-model="val" />
    <p zl-model="val"></p>
    <script>
        //代码演示：defineProperty的双向绑定
        var obj = {};
        Object.defineProperty(obj, 'val', {
            set: function (newVal) {
                var list = document.querySelectorAll("[zl-model=val]");
                for (let i = 0; i < list.length; i++) { //进行判断时input还是p标签
                    if (list[i].nodeName == "INPUT") list[i].value = newVal == undefined ? '' : newVal;
                    else list[i].innerHTML = newVal == undefined ? '' : newVal;
                }
            }
        });
        document.querySelector("[zl-model=val]").addEventListener("keydown", function (e) { //对键盘的输入事件进行监听
            obj.val = e.target.value;   //这里赋值会执行defineProperty中的set方法
        })
    </script>
</body>
</html>

注意

当我们实现了双向绑定后，我们实际上并没有真正的修改到对象的值，而只是监听了访问和设置值的一些行为而已

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

更详细的模仿Vue的双向绑定可以参考这篇文章 Vue双向绑定

以上是 VUE：双向绑定的原理和实现(浅谈) 的全部内容， 来源链接： utcz.com/z/375803.html

回到顶部