Vue实现双向数据绑定的原理

最新推荐文章于 2024-04-22 09:07:57 发布

AsuraThor

最新推荐文章于 2024-04-22 09:07:57 发布

阅读量172

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/AsuraThor/article/details/104954809

版权

Vue实现双向数据绑定的原理

Vue实现双向数据绑定的原理就是利用了 Object.defineProperty()，这个方法通过重新定义对象，获取属性值(get)和设置属性值(set)的操作来实现。
Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。

Object.defineProperty()方法有三个参数：

obj 要修改或定义key值的对象
key 对应obj对象的里面某有已有或要修改的属性
options 这个参数对象里面有get,set两个函数，用来定义属性值

简单的实现

同步输出

<!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>
</head>
<body>
    <div id="app">
        <input type="text" id="a">
        <span id="b"></span>
    </div>
</body>
<script>

    var obj = {};
    var val = "she";

    Object.defineProperty(obj, 'val', {

        get: function () {
            return val;
        },

        set: function (newVal) {
            val = newVal;
            document.getElementById('a').value = val;
            document.getElementById('b').innerHTML = val;
        }
    });

    document.addEventListener('keyup', function (e) {
        obj.val = e.target.value;
    })

</script>
</html>

AsuraThor

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue实现双向数据绑定的原理

Vue实现双向数据绑定的原理Vue实现双向数据绑定的原理就是利用了 Object.defineProperty()，这个方法通过重新定义对象，获取属性值(get)和设置属性值(set)的操作来实现。Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。Object.defineProperty()方法有三个参数：...
复制链接

扫一扫