vue双向数据绑定原理

最新推荐文章于 2024-07-31 23:47:49 发布

ygy211715

最新推荐文章于 2024-07-31 23:47:49 发布

阅读量366

点赞数

分类专栏： vue

vue 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

我们都知道，anjular，vue之所以这么火很大的一个因素就是因为具备双向数据绑定的功能。至于是怎么实现的，以我的功力自己还参透不了。在网上看了很多篇文章，基本上是理解了，下面说一下我总结的和我理解的vue是如何进行双向数据绑定的。

再说双向数据绑定之前说下什么是单向数据绑定

之前我们前端写数据绑定的流程大多是这样的，我们发送请求，从后端拿到数据。然后在前端编写js代码，把后端数据整合到html代码中，然后把这段代码插入到文档流中。来实现数据绑定。

单向数据绑定的缺点：一般单向数据绑定的业务处理会掺杂大量复杂的DOM操作，代码一旦生成就没有办法再改变。如果想改变视图中的数据，就要重新进行请求，去掉之前的HTML代码，再重新编辑整理成html代码插入到文档流中。

双向数据绑定指的是视图和数据模型之间的双向绑定，用户在视图上的改动会自动同步到数据模型中，数据模型中的值发生了变化也会同步到视图中。这样我们就无需重新整理HTML文档，省去了大量dom操作，真正的前后端分离，给我们前端带来了大大的方便。设想一下，我们用双向数据绑定提交表单，是不是无需一一获取用户输入的信息，而是可以直接从数据模型中获取。

首先呢，我想先说下defineProperty()这个方法，defineProperty这个方法在js中十分的重要，主要功能是用来定义对象的属性或修改原有的属性。并且返回这个对象。

使用方法如下

obj.defineProperty(obj,prop,descriptor)

第一个参数代表的是想要操作的对象

第二个参数是想要定义或者修改的属性

第三个是属性描述符

属性描述符是一个对象，分为数据属性和存取属性。双向数据绑定主要就是利用了存取属性来实现的，存取属性中提供了get和set方法，get方法是获取属性时会触发的方法，set方法是设置或者改变属性时会触发的方法，双向数据绑定就是通过defineProperty方法重新定义了对象属性的获取（get）和设置属性值(set)得操作来实现的

下面是个简单的例子

<body>
<input type="text" id="userName">
<div id ="name"></div>
<script>
    var obj={
    };
    var keyVal;
    //主要使用到了get和set方法，最为关键
    Object.defineProperty(obj,"userName",{
        get:function(){
           console.log("get函数触发")
        },
        set:function(val){
            console.log("set函数触发");
            document.getElementById("name").innerHTML=val;
            document.getElementById("userName").value=val;
        }
    });
    document.getElementById("userName").addEventListener("keyup",function(event){
        obj.userName=event.target.value;
    }
    )
</script>
</body>

在控制台给obj.userName赋值会触发set方法，取值会触发get方法，实现双向数据绑定