Vue 3.0雙向綁定原理的實(shí)現(xiàn)方法

更新時(shí)間：2019年10月23日 17:13:03 作者：前端的小劉老師

這篇文章主要為大家詳細(xì)介紹了Vue 3.0雙向綁定原理的實(shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

proxy方法

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

Vue 3.0與Vue 2.0的區(qū)別僅是數(shù)據(jù)劫持的方式由Object.defineProperty更改為Proxy代理，其他代碼不變。可查看Vue 2.0雙向綁定原理的實(shí)現(xiàn)

具體實(shí)現(xiàn)過程的代碼如下：

1、定義構(gòu)造函數(shù)

function Vue(option){
 this.$el = document.querySelector(option.el); //獲取掛載節(jié)點(diǎn)
 this.$data = option.data;
 this.$methods = option.methods;
 this.deps = {};  //所有訂閱者集合 目標(biāo)格式（一對(duì)多的關(guān)系）：{msg: [訂閱者1, 訂閱者2, 訂閱者3], info: [訂閱者1, 訂閱者2]}
 this.observer(this.$data); //調(diào)用觀察者
 this.compile(this.$el);  //調(diào)用指令解析器
}

2、定義指令解析器

Vue.prototype.compile = function (el) {
 let nodes = el.children; //獲取掛載節(jié)點(diǎn)的子節(jié)點(diǎn)
 for (var i = 0; i < nodes.length; i++) {
  var node = nodes[i];
  if (node.children.length) {
   this.compile(node) //遞歸獲取子節(jié)點(diǎn)
  }
  if (node.hasAttribute('l-model')) { //當(dāng)子節(jié)點(diǎn)存在l-model指令
   let attrVal = node.getAttribute('l-model'); //獲取屬性值
   node.addEventListener('input', (() => {
    this.deps[attrVal].push(new Watcher(node, "value", this, attrVal)); //添加一個(gè)訂閱者
    let thisNode = node;
    return () => {
     this.$data[attrVal] = thisNode.value //更新數(shù)據(jù)層的數(shù)據(jù)
    }
   })())
  }
  if (node.hasAttribute('l-html')) {
   let attrVal = node.getAttribute('l-html'); //獲取屬性值
   this.deps[attrVal].push(new Watcher(node, "innerHTML", this, attrVal)); //添加一個(gè)訂閱者
  }
  if (node.innerHTML.match(/{{([^\{|\}]+)}}/)) {
   let attrVal = node.innerHTML.replace(/[{{|}}]/g, ''); //獲取插值表達(dá)式內(nèi)容
   this.deps[attrVal].push(new Watcher(node, "innerHTML", this, attrVal)); //添加一個(gè)訂閱者
  }
  if (node.hasAttribute('l-on:click')) {
   let attrVal = node.getAttribute('l-on:click'); //獲取事件觸發(fā)的方法名
   node.addEventListener('click', this.$methods[attrVal].bind(this.$data)); //將this指向this.$data
  }
 }
}

3、定義觀察者(區(qū)別在這一塊代碼)

Liu.prototype.observer = function (data) {
 const that = this;
 for(var key in data){
  that.deps[key] = []; //初始化所有訂閱者對(duì)象{msg: [訂閱者], info: []}
 }
 let handler = {
  get(target, property) {
   return target[property];
  },
  set(target, key, value) {
   let res = Reflect.set(target, key, value);
   var watchers = that.deps[key];
   watchers.map(item => {
    item.update();
   });
   return res;
  }
 }
 this.$data = new Proxy(data, handler);
}

4、定義訂閱者

function Watcher(el, attr, vm, attrVal) {
 this.el = el;
 this.attr = attr;
 this.vm = vm;
 this.val = attrVal;
 this.update(); //更新視圖
}

5、更新視圖

Watcher.prototype.update = function () {
 this.el[this.attr] = this.vm.$data[this.val]
}

以上代碼定義在一個(gè)Vue.js文件中，在需要使用雙向綁定的地方引入即可。

嘗試使用一下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <script src="./vue.js"></script>
</head>
<body>
 <!--
  實(shí)現(xiàn)mvvm的雙向綁定，是采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式，通過Object.defineProperty()來(lái)劫持各個(gè)屬性的setter，getter，在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)。就必須要實(shí)現(xiàn)以下幾點(diǎn)：
   1、實(shí)現(xiàn)一個(gè)數(shù)據(jù)監(jiān)聽器Observer，能夠?qū)?shù)據(jù)對(duì)象的所有屬性進(jìn)行監(jiān)聽，如有變動(dòng)可拿到最新值并通知訂閱者
   2、實(shí)現(xiàn)一個(gè)指令解析器Compile，對(duì)每個(gè)元素節(jié)點(diǎn)的指令進(jìn)行掃描和解析，根據(jù)指令模板替換數(shù)據(jù)，以及綁定相應(yīng)的更新函數(shù)
   3、實(shí)現(xiàn)一個(gè)Watcher，作為連接Observer和Compile的橋梁，能夠訂閱并收到每個(gè)屬性變動(dòng)的通知，執(zhí)行指令綁定的相應(yīng)回調(diào)函數(shù)，從而更新視圖
   4、mvvm入口函數(shù)，整合以上三者
 -->
 <div id="app">
  <input type="text" l-model="msg" >
  <p l-html="msg"></p>
  <input type="text" l-model="info" >
  <p l-html="info"></p>
  <button l-on:click="clickMe">點(diǎn)我</button>
  <p>{{msg}}</p>
 </div>

 <script>
  var vm = new Vue({
   el: "#app",
   data: {
    msg: "恭喜發(fā)財(cái)",
    info: "好好學(xué)習(xí), 天天向上"
   },
   methods: {
    clickMe(){
     this.msg = "我愛敲代碼";
    }
   }
  })
 </script>
</body>
</html>

更多教程點(diǎn)擊《Vue.js前端組件學(xué)習(xí)教程》，歡迎大家學(xué)習(xí)閱讀。

關(guān)于vue.js組件的教程，請(qǐng)大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: