快捷導(dǎo)航

Vue2.0/3.0雙向數(shù)據(jù)綁定的實(shí)現(xiàn)原理詳解

更新時(shí)間：2021年04月21日 10:12:07 作者：大·左

這篇文章主要給大家介紹了關(guān)于Vue2.0/3.0雙向數(shù)據(jù)綁定的實(shí)現(xiàn)原理,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

Vue2.0/3.0 雙向數(shù)據(jù)綁定的實(shí)現(xiàn)原理

雙向數(shù)據(jù)綁定簡意即數(shù)據(jù)的改變能讓頁面重新渲染

Vue2.0 ES5的原理：

Object.defineProperty 對數(shù)據(jù)進(jìn)行攔截

簡單小案例

<body>
    姓名:
    <span id="name"></span>
    <br />
    <input type="text" id="inputName" />
  </body>

改變input框的值讓span里面的值隨之改變數(shù)據(jù)的改變可以讓視圖

 <script>
      let obj ={
          name:''
      }
      Object.defineProperty(obj,'name',{
          get(){
                return this.name    //注意錯(cuò)誤示范 不可以用this 形成死循環(huán) 要準(zhǔn)備一個(gè)新的值
          },
          set(val){

          }
      })
  </script>

正確寫法

<script>
      let obj = {
      name: ""
    };
    let newObj = JSON.parse(JSON.stringify(obj));
    Object.defineProperty(obj, "name", {
      get() {
        return newObj.name;
      },
      set(val) {
        if (val === newObj.name) return; //增加判斷優(yōu)化性能 判斷新值與舊值是否一樣 一樣就返回  不一樣的話的再次賦值
        newObj.name = val;
        obServer();
      }
    });
    //   重新賦值的方法
    function obServer() {
      spanName.innerHTML = newObj.name; //獲取obj.name的值
      inputName.value = newObj.name;
    }
    obServer(); //開始就執(zhí)行一次
    setTimeout(() => {
      obj.name = "大左";
    }, 1000);
  </script>

執(zhí)行邏輯

1.setTimeout執(zhí)行1秒后修改數(shù)據(jù) 觸發(fā)obj.name的set（val）

2.拿到最新的值給到newObj.name 執(zhí)行 obServer()方法

3.拿到最新的值賦值 spanName.innerHTML = newObj.name; inputName.value = newObj.name;

input框的值改變 span框的值隨著改變

inputName.oninput = function() {
      obj.name = this.value;
    };

這個(gè)操作在Vue 里面叫v-model

Vue2.0不足之處

1.需要對原始數(shù)據(jù)進(jìn)行克隆不然死循環(huán) 上面有提到

2.如果我們想給對象中的數(shù)據(jù)進(jìn)行g(shù)et和set的攔截就要一個(gè)個(gè)設(shè)置對象中的屬性都要單獨(dú)的監(jiān)聽一下如果有多個(gè)就要循環(huán)遍歷了分別來監(jiān)聽了

反看vue2.0中的data

data（）{
return{
obj：{}
}
}
this.obj.name='XXX'  //這個(gè)操作行不通  因?yàn)閯傞_始的時(shí)候obj里面沒有name所以就沒有進(jìn)行監(jiān)聽 都是以上第二條造成的

ok 那我們再看一下

3.0的特點(diǎn)以及好處

主要用到了SE6里面的proxy

 <script>
    let obj = {};
    obj = new Proxy(obj, {
      get(target, prop) {
        console.log("D");
        return target[prop];
      },
      set(target, prop, value) {
        console.log("Z");
        target[prop] = value;
      }
    }); //監(jiān)聽整個(gè)對象 不需要指定屬性 相當(dāng)于把對象里所有的屬性都監(jiān)聽了 So 直接寫整體的set get
  </script>

1.獲取obj.name 觸發(fā)get 這里沒有name 但是可以走因?yàn)闆]有值所以返回undefine

2. 設(shè)置給name值看一下觸發(fā)set

3.再次獲取obj.name看看有沒有值

So 不管你現(xiàn)在對象里有沒有某個(gè)屬性因?yàn)檫@里監(jiān)聽的是整個(gè)對象對象里面未來有的都有了彌補(bǔ)2.0不足之處

1.不需要clone

2.也不需要給每一個(gè)對象里面的屬性單獨(dú)設(shè)置給整體對象設(shè)置就ok了干凈又衛(wèi)生啊

再次實(shí)現(xiàn)上面2.0的操作

 <script>
    let obj = {};
    obj = new Proxy(obj, {
      get(target, prop) {
        console.log("D");
        return target[prop];
      },
      set(target, prop, value) {
        console.log("Z");
        target[prop] = value;
        obServer();
      }
    }); //監(jiān)聽整個(gè)對象 不需要指定屬性 相當(dāng)于把對象里所有的屬性都監(jiān)聽了 So 直接寫整體的set get
    //   重新賦值的方法
    function obServer() {
      spanName.innerHTML = obj.name; //獲取obj.name的值
      inputName.value = obj.name;
    }
    obServer(); //開始就執(zhí)行一次
    setTimeout(() => {
      obj.name = "大左";
    }, 1000);
    inputName.oninput = function() {
      obj.name = this.value;
    };
  </script>