首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue中view-model双向绑定

vue中view-model双向绑定基础原理解析

2022-10-18 14:40:03 作者：程序員劝退师

这篇文章主要介绍了vue中view-model双向绑定基础原理，文中给大家介绍了vue双向绑定的原理总结，本文通过示例代码给大家介绍的非常详细,需要的朋友可以参考下

利用Object.defineProperty进行数据劫持

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue V-M</title>
</head>
<body>
  <div id="ap">
    <input id="input" type="text"><br/>
    <div id="text"></div><br/>
    <button id="button" type="button">打印</button>
  </div>
  <script>
    var input = document.querySelector('#input');
    var text = document.querySelector("#text");
    var button = document.querySelector("#button");
    var data = {value:''};

    Object.defineProperty(data, 'value', {
      get:function(){
        console.log('get value ',input.value);
        return input.value;
      },
      set:function(value){
        console.log('set value ',value);
        text.innerHTML = value;
        input.value = value;
      }
    });

    input.addEventListener("keyup", function (e) {
      data.value = e.target.value;
    }, false)

    button.addEventListener('click',function(e){
      console.log('data ',data);
    },false);
  </script>
</body>
</html>

vue双向绑定的原理总结

MVVM

视图模型双向绑定，是Model-View-ViewModel的缩写，也就是把MVC中的Controller演变成ViewModel。Model层代表数据模型，View代表UI组件，ViewModel是View和Model层的桥梁，数据会绑定到viewModel层并自动将数据渲染到页面中，视图变化的时候会通知viewModel层更新数据。以前是操作DOM结构更新视图，现在是数据驱动视图。

优点:
1.低耦合。视图（View）可以独立于Model变化和修改，一个Model可以绑定到不同的View上，当View变化的时候Model可以不变化，当Model变化的时候View也可以不变；
2.可重用性。你可以把一些视图逻辑放在一个Model里面，让很多View重用这段视图逻辑。
3.独立开发。开发人员可以专注于业务逻辑和数据的开发(ViewModel)，设计人员可以专注于页面设计。
4.可测试。

数据(model)变化主动触发ui(view)变化，同时ui(view)变化主动触发数据(model)变化，当然这里的ui变化指定表单中的用户输入，可通俗的理解为：在单向绑定的基础上给可输入元素（input、textarea等）添加change(input)事件，来动态修改model和view

vue当中的双向绑定

vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter和getter，在数据变动时发布消息给订阅者，触发相应的监听回调

使用 v-model / .sync 实现，v-model是 v-bind:value 和 v-on:input 的语法糖

v-bind:value 实现了 data ⇒ UI 的单向绑定
v-on:input 实现了 UI ⇒ data 的单向绑定

引申出这两个单向绑定如何实现

v-bind的实现

通过 Object.defineProperty API 给 data 创建 getter 和 setter，用于监听 data 的改变，data 一变就会安排改变 UI

v-on的实现

通过 template compiler 给 DOM 添加事件监听，DOM input 的值变了就会去修改 data。

Compile（指令解析器）

Compile主要做的事情是解析模板指令，将模板中变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加鉴定数据的订阅者，一旦数据有变动，收到通知，更新视图

Observer（数据监听器）

Observer的核心是通过Object.defineProprtty()来监听数据的变动，这个函数内部可以定义setter和getter，每当数据发生变化，就会触发setter。这时候Observer就要通知订阅者，订阅者就是Watcher

Watcher（订阅者）

Watcher订阅者作为Observer和Compile之间通信的桥梁，主要做的事情是：

在自身实例化时往属性订阅器(dep)里面添加自己
自身必须有一个update()方法
待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调

到此这篇关于vue中view-model双向绑定基础原理的文章就介绍到这了,更多相关vue中view-model双向绑定内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！