<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <div> <div v-text="myText"></div> </div> <input type="text" v-model="myText"> </div> <script src="likeVue.js"></script> <script> let vm=new Vue({ el:'#app', data:{ myText:'这是数据驱动' } }) </script> </body> </html>
class Vue { constructor(setting){ this.$el=document.querySelector(setting.el); this.$data=setting.data; //创建容器保存订阅者信息 this._directive={},this.newObj={}; this.Observer(this.$data); this.Complie(this.$el); } //解析指令 Complie(el){ let nodes =el.children; for(let i=0;i<nodes.length;i++){ let node =nodes[i] if(node.hasAttribute('v-text')){ let attrval=node.getAttribute('v-text'); //push ？？订阅者 this._directive[attrval].push(new Watcher(node,this,attrval,'innerHTML')); } if(node.hasAttribute('v-model')){ let attrval=node.getAttribute('v-model'); //push ？？订阅者 this._directive[attrval].push(new Watcher(node,this,attrval,'value')); //dom变化更新数据 node.addEventListener('input',()=>{ this.$data[attrval]=node.value; this.newObj[attrval]=node.value; // this._directive[attrval].forEach(item=>{ // item.update() // }); }) } if(node.children.length){ this.Complie(node) } } } //劫持数据 Observer(data){ for (let key in data) { this._directive[key]=[]; // let val =data[key]; // let watcher =this._directive[key]; // Object.defineProperty(this.$data,key,{ // get:function(){ // return val; // }, // set:function(newVal){ // if(newVal!==val){ // val =newVal; // watcher.forEach(item=>{ // item.update() // }) // // } // } // }) } let self=this; this.newObj = new Proxy(data, { get: function(target, key, receiver) { console.log(`getting ${key}!`); return Reflect.get(target, key, receiver); }, set: function(target, key, value, receiver) { console.log(target, key, value, receiver); self._directive[key].forEach(item=>{ item.update(); }) return Reflect.set(target, key, value, receiver); }, }); } } //订阅者-->负责自己更新本身状态 class Watcher{ constructor(el,vm,exp,attr){ this.el=el; this.vm=vm; this.exp=exp; this.attr=attr; this.update(); } update(){ this.el[this.attr]=this.vm.$data[this.exp] } }