溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

怎么在Vue 3.0中實(shí)現(xiàn)雙向綁定

發(fā)布時(shí)間：2021-04-17 17:30:29 來(lái)源：億速云 閱讀：124 作者：Leah 欄目：web開(kāi)發(fā)

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)怎么在Vue 3.0中實(shí)現(xiàn)雙向綁定，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

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ā)布者-訂閱者模式的方式，通過(guò)Object.defineProperty()來(lái)劫持各個(gè)屬性的setter，getter，在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽(tīng)回調(diào)。就必須要實(shí)現(xiàn)以下幾點(diǎn)：
   1、實(shí)現(xiàn)一個(gè)數(shù)據(jù)監(jiān)聽(tīng)器Observer，能夠?qū)?shù)據(jù)對(duì)象的所有屬性進(jìn)行監(jiān)聽(tīng)，如有變動(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 = "我愛(ài)敲代碼";
    }
   }
  })
 </script>
</body>
</html>

上述就是小編為大家分享的怎么在Vue 3.0中實(shí)現(xiàn)雙向綁定了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

vue
AI
助
手