proxy方式

vue.js 是接纳数据挟制连系宣布者-订阅者模式的方式，通过new Proxy()来挟制各个属性的setter，getter，在数据更改时宣布新闻给订阅者，触发响应的监听回调。

Vue 3.0与Vue 2.0的区别仅是数据挟制的方式由Object.defineProperty更改为Proxy署理，其他代码稳固。可查看Vue 2.0双向绑定原理的实现

详细实现历程的代码如下：

1、界说组织函数

function Vue(option){
 this.$el = document.querySelector(option.el); //获取挂载节点
 this.$data = option.data;
 this.$methods = option.methods;
 this.deps = {};  //所有订阅者聚集 目的花样（一对多的关系）：{msg: [订阅者1, 订阅者2, 订阅者3], info: [订阅者1, 订阅者2]}
 this.observer(this.$data); //挪用考察者
 this.compile(this.$el);  //挪用指令剖析器
}

2、界说指令剖析器

Vue.prototype.compile = function (el) {
 let nodes = el.children; //获取挂载节点的子节点
 for (var i = 0; i < nodes.length; i  ) {
  var node = nodes[i];
  if (node.children.length) {
   this.compile(node) //递归获取子节点
  }
  if (node.hasAttribute('l-model')) { //当子节点存在l-model指令
   let attrVal = node.getAttribute('l-model'); //获取属性值
   node.addEventListener('input', (() => {
    this.deps[attrVal].push(new Watcher(node, "value", this, attrVal)); //添加一个订阅者
    let thisNode = node;
    return () => {
     this.$data[attrVal] = thisNode.value //更新数据层的数据
    }
   })())
  }
  if (node.hasAttribute('l-html')) {
   let attrVal = node.getAttribute('l-html'); //获取属性值
   this.deps[attrVal].push(new Watcher(node, "innerHTML", this, attrVal)); //添加一个订阅者
  }
  if (node.innerHTML.match(/{{([^{|}] )}}/)) {
   let attrVal = node.innerHTML.replace(/[{{|}}]/g, ''); //获取插值表达式内容
   this.deps[attrVal].push(new Watcher(node, "innerHTML", this, attrVal)); //添加一个订阅者
  }
  if (node.hasAttribute('l-on:click')) {
   let attrVal = node.getAttribute('l-on:click'); //获取事宜触发的方式名
   node.addEventListener('click', this.$methods[attrVal].bind(this.$data)); //将this指向this.$data
  }
 }
}

3、界说考察者(区别在这一块代码)

Liu.prototype.observer = function (data) {
 const that = this;
 for(var key in data){
  that.deps[key] = []; //初始化所有订阅者工具{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、界说订阅者

使用layui前端框架弹出form表单以及提交的示例，今天小编就为大家分享一篇使用layui前端框架弹出form表单以及提交的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧，使用layui前端框架弹出form表单以及提交的示例

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]
}

以上代码界说在一个Vue.js文件中，在需要使用双向绑定的地方引入即可。

实验使用一下：

 
 
 
 
 
 
 Document
 


 
 
 
 
  
  
  
  

  
  
  
  

  
  点我
  
  
{{msg}}
 

 
  


 

更多教程点击《Vue.js前端组件学习教程》，迎接人人学习阅读。

关于vue.js组件的教程，请人人点击专题vue.js组件学习教程举行学习。

以上就是本文的所有内容，希望对人人的学习有所辅助，也希望人人多多支持爱蒂网。

您可能感兴趣的文章:

• Vue 2.0双向绑定原理的实现方式
• 详解基于Vue的支持数据双向绑定的select组件
• 详解vue中的父子传值双向绑定及数据更新问题
• 详解vue的双向绑定原理及实现
• 自界说Vue中的v-module双向绑定的实现
• 解决VUE双向绑定失效的问题