Vue如何实现双向数据绑定

最新推荐文章于 2025-02-28 22:05:10 发布

丰柏林

最新推荐文章于 2025-02-28 22:05:10 发布

阅读量160

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue学习笔记文章标签： Vue中的双向绑定双向绑定的源码

本文链接：https://blog.youkuaiyun.com/qq_40647912/article/details/99872684

vue学习笔记专栏收录该内容

17 篇文章

订阅专栏

Vue如何实现双向数据绑定？
.Object.defineProperty()函数

<!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>

    <input type="text" id="a">
    <span id="b"></span>

        <script>
            var obj = {};
            Object.defineProperty(obj,'hello',{
                set: function(newVal) {
                    document.getElementById('a').value = newVal;
                    document.getElementById('b').innerHTML = newVal;
                }
            });

            document.addEventListener('keyup',function (e){
                obj.hello = e.target.value;
            });
        </script>
    
</body>
</html>

在实际的运行过程中，defineProperty()里面会触发set init()或者get ini() 这两个方法进行监听。