vue 双向数据绑定原理

最新推荐文章于 2025-04-15 23:51:23 发布

zhengsanmiing

最新推荐文章于 2025-04-15 23:51:23 发布

阅读量149

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/zhengsanmiing/article/details/127585352

版权

博客介绍了Vue数据双向绑定的实现，主要利用Object的defineProperty()方法做数据劫持，该方法包含get和set方法，分别负责取值和设置值，通过给属性赋值即可实现Vue的数据双向绑定，并提及代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先最主要的是Object的defineProperty（）这个方法，作用的在对象上增加一个属性，作用就是做数据劫持，里面分别由get和set方法。get是负责取值，set负责设置值。通过那value赋值给这个属性，就可以实现vue的数据双向绑定。

代码实现：

<body>
     <input type="text" id="username"> 
     <p id="usr"></p>
    <script>
        let obj = {}
        //数据劫持
        Object.defineProperty(obj,'username',{
            get:function(){
                console.log("取值");
            },
            set:function (val){
              document.getElementById("usr").innerHTML = val   
            }
        })

        document.querySelector("#username").addEventListener("keyup",()=>{
            obj.username = event.target.value
        })
    </script>
</body>