快捷導(dǎo)航

vue中view-model雙向綁定基礎(chǔ)原理解析

更新時間：2022年10月18日 14:40:03 作者：程序員勸退師

這篇文章主要介紹了vue中view-model雙向綁定基礎(chǔ)原理，文中給大家介紹了vue雙向綁定的原理總結(jié)，本文通過示例代碼給大家介紹的非常詳細,需要的朋友可以參考下

利用Object.defineProperty進行數(shù)據(jù)劫持

代碼如下

<!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雙向綁定的原理總結(jié)

MVVM

視圖模型雙向綁定，是Model-View-ViewModel的縮寫，也就是把MVC中的Controller演變成ViewModel。Model層代表數(shù)據(jù)模型，View代表UI組件，ViewModel是View和Model層的橋梁，數(shù)據(jù)會綁定到viewModel層并自動將數(shù)據(jù)渲染到頁面中，視圖變化的時候會通知viewModel層更新數(shù)據(jù)。以前是操作DOM結(jié)構(gòu)更新視圖，現(xiàn)在是數(shù)據(jù)驅(qū)動視圖。

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

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

vue當中的雙向綁定

vue.js是采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個屬性的setter和getter，在數(shù)據(jù)變動時發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)

使用 v-model / .sync 實現(xiàn)，v-model是 v-bind:value 和 v-on:input 的語法糖

v-bind:value 實現(xiàn)了 data ⇒ UI 的單向綁定
v-on:input 實現(xiàn)了 UI ⇒ data 的單向綁定

引申出這兩個單向綁定如何實現(xiàn)

v-bind的實現(xiàn)

通過 Object.defineProperty API 給 data 創(chuàng)建 getter 和 setter，用于監(jiān)聽 data 的改變，data 一變就會安排改變 UI

v-on的實現(xiàn)

通過 template compiler 給 DOM 添加事件監(jiān)聽，DOM input 的值變了就會去修改 data。

Compile（指令解析器）

Compile主要做的事情是解析模板指令，將模板中變量替換成數(shù)據(jù)，然后初始化渲染頁面視圖，并將每個指令對應(yīng)的節(jié)點綁定更新函數(shù)，添加鑒定數(shù)據(jù)的訂閱者，一旦數(shù)據(jù)有變動，收到通知，更新視圖

Observer（數(shù)據(jù)監(jiān)聽器）

Observer的核心是通過Object.defineProprtty()來監(jiān)聽數(shù)據(jù)的變動，這個函數(shù)內(nèi)部可以定義setter和getter，每當數(shù)據(jù)發(fā)生變化，就會觸發(fā)setter。這時候Observer就要通知訂閱者，訂閱者就是Watcher