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結構更新視圖，現(xiàn)在是數據驅動視圖。

優(yōu)點:
1.低耦合。視圖（View）可以獨立于Model變化和修改，一個Model可以綁定到不同的View上，當View變化的時候Model可以不變化，當Model變化的時候View也可以不變；
2.可重用性。你可以把一些視圖邏輯放在一個Model里面，讓很多View重用這段視圖邏輯。
3.獨立開發(fā)。開發(fā)人員可以專注于業(yè)務邏輯和數據的開發(fā)(ViewModel)，設計人員可以專注于頁面設計。
4.可測試。

數據(model)變化主動觸發(fā)ui(view)變化，同時ui(view)變化主動觸發(fā)數據(model)變化，當然這里的ui變化指定表單中的用戶輸入，可通俗的理解為：在單向綁定的基礎上給可輸入元素（input、textarea等）添加change(input)事件，來動態(tài)修改model和view