Vue 數(shù)據(jù)綁定的原理分析

更新時間：2020年11月16日 09:34:43 作者：TMaize

這篇文章主要介紹了Vue 數(shù)據(jù)綁定的原理，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下

原理

其實原理很簡單，就是攔截了Object的get/set方法，在對數(shù)據(jù)進行set(obj.aget=18)時去重現(xiàn)渲染視圖

實現(xiàn)方式有兩種

方式1

定義了同名的get/set就相當于定義了age

 var test = {
   _age: 18,
   get age() {
     console.log('觸發(fā)get');
     //直接會this.age會進入死遞歸的
     return this._age;
   },
   set age(age) {
     console.log('觸發(fā)set');
     this._age = age;
   }
 };

為了讓test不顯示多余的變量，可以把_age定義在外部

 var _age = 18;
 var test = {
   get age() {
     console.log('觸發(fā)get');
     //直接會this.age會進入死遞歸的
     return _age;
   },
   set age(age) {
     console.log('觸發(fā)set');
     _age = age;
   }
 };

方式2

使用這種方式完美的解決了對象內(nèi)包含多余的變量的問題

 function test() {
   var _age = 18;
   Object.defineProperty(this, "age", {
     get: function () {
       console.log('觸發(fā)get');
       return _age;
     },
     set: function (value) {
       console.log('觸發(fā)set')
       _age = value;
     }
   });
 }
 var t = new test();
 t.age=18;

實現(xiàn)數(shù)據(jù)到視圖的綁定

這里的渲染只是一個簡單的正則替換

要實現(xiàn)Vue那么強大的功能還要自己實現(xiàn)一個模板引擎

<div id="test">
  <p>name:</p>
  <p>age:</p>
</div>

function Element(id, initData) {
  var self = this;
  var el = document.getElementById(id);
  var templet = el.innerHTML;
  var _data = null;

  if (initData) {
    _data = {};
    for (var variable in initData) {
      _data[variable] = initData[variable];
      bind(variable, self);
    }
  }

  function bind(variable, obj) {
    Object.defineProperty(self, variable, {
      set: function (value) {
        //使用_data里的數(shù)據(jù)，避免死遞歸
        _data[variable] = value;
        //每次被設(shè)置新值的時候重新渲染界面
        render();
      },
      get: function () {
        return _data[variable];
      },
    });
  }

  //渲染
  function render() {
    var temp = templet;
    temp = temp.replace(/\{\{(.*)\}\}/g, function (s, t) {
      if (_data[t]) {
        return _data[t];
      }
    });
    el.innerHTML = temp;
  }

  //初始化時候手動渲染一次
  render();
}

var app = new Element('test', {
  name: 'zhangsan',
  age: 18
})

實現(xiàn)視圖到數(shù)據(jù)的綁定

這里做一個簡單的input改變的事件監(jiān)聽

每次渲染之后都要重新添加事件，用時間委托可以實現(xiàn),但是input的focus位置不能保留

可見Vue內(nèi)部的渲染和事件綁定肯定不是像這里demo寫的那么簡單，這里只是大致的原理(可能并不是這樣的。。。)

<div id="test">
  <input type="text" value="">
  <br>
  <span></span>
</div>

function Element(id, initData) {
  var self = this;
  var el = document.getElementById(id);
  var templet = el.innerHTML;
  var input = el.getElementsByTagName('input')[0];
  var _data = initData;

  Object.defineProperty(self, 'data', {
    set: function (value) {
      _data = value;
      render();
    },
    get: function () {
      return _data;
    },
  });

  //渲染
  function render() {
    var temp = templet;
    temp = temp.replace(/\{\{(data)\}\}/g, function (s, t) {
      return _data;
    });
    el.innerHTML = temp;

    //重新添加事件，其實應該用事件委托的
    input = el.getElementsByTagName('input')[0];
    inputchange();
    input.focus();
  }

  function inputchange() {
    if (window.attachEvent) {
      input.attachEvent("oninput", temp);
    } else if (window.addEventListener) {
      input.addEventListener("input", temp, false);
    }

    function temp() {
      self.data = input.value;
    }
  }

  //初始化時候手動渲染一次
  render();
}
var app = new Element('test', '');

以上就是Vue 數(shù)據(jù)綁定的原理分析的詳細內(nèi)容，更多關(guān)于Vue 數(shù)據(jù)綁定的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: