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

創(chuàng)新互聯(lián)是一家專注于網(wǎng)站制作、網(wǎng)站建設(shè)與策劃設(shè)計(jì),囊謙網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)10多年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:囊謙等地區(qū)。囊謙做網(wǎng)站價(jià)格咨詢:13518219792

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文件中，在需要使用雙向綁定的地方引入即可。

嘗試使用一下：

 
 
 
 
 


 
 
  
  

  
  

  點(diǎn)我
  
{{msg}}