Vue雙向綁定實現原理demo

時間 2019-12-11

標籤 vue 雙向綁定實現原理 demo 简体版

原文原文鏈接

一.index.htmlhtml

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Vue雙向綁定原理</title>
        <script src="js/myVue.js"></script>
    </head>
    <body>
        <div id="myApp">
            <input type="text" style="width:200px" v-model="value">
            <button v-on:click="fn">清空</button>
            <div v-text="value"></div>
            <div v-html="value"></div>
        </div>
    </body>
    <script>
    var vm = new MyVue({
        el: "#myApp",
        data: {
            value: "<h1>VUE</h1>"
        },
        methods: {
            fn() {
                this.value = "";
            }
        }
    })
</script>
</html>

二.myVue.jsnode

function MyVue(options){// 建立構造函數MyVue,並接收對象結構體options
    this.$el=document.querySelector(options.el);// 指定掛載元素
    this.$data=options.data;// 存放你的數據內容
    this.$methods=options.methods;// 存放設你的方法
    this.binding={};// 全部數據相關的訂閱者對象都存放於此。最終結構爲{數據屬性:[訂閱者對象，訂閱者對象……]}
    this.observer();// 調用觀察者，對數據進行劫持
    this.compile(this.$el);// 對元素指令進行解析，訂閱者也是在此處建立的
}
MyVue.prototype.observer=function(){// 觀察者
    let value="";// 定義用於存放數據屬性值的變量value
    for(let key in this.$data){ // 遍歷數據對象
        value=this.$data[key];// 對象屬性值
        this.binding[key]=[];// 數據訂閱者初始化,是一個數組，
        let binding=this.binding[key];// 用於存放本數據相關的全部訂閱者，初始爲[]
        Object.defineProperty(this.$data,key,{// 開始設置劫持
            get(){
                return value;// 讀取值爲value
            },
            set(v){// v爲設置的值
                if(v!==value){// 當設置的值與當前值不相等時
                    value=v;// 將讀取值更新爲v
                    binding.forEach(watcher=>{
                        watcher.update();// 通知與本數據相關的訂閱者們進行視圖更新
                    })
                }
            }
        })
    }
}
MyVue.prototype.compile=function(el){// 解析器
    let nodes=el.children;// 得到全部子節點
    for(let i=0;i<nodes.length;i++){// 對子節點進行遍歷
        let node=nodes[i];// 具體節點
        if(node.children.length>0)// 判斷是否具備子節點
            this.compile(node);// 若是有子點進行遞歸操做
        if(node.hasAttribute("v-on:click")){// 該節點是否擁有v-on指令
            let attrVal=node.getAttribute("v-on:click");// 獲得指令對應的方法名
            // 爲元素綁定click事件，事件方法爲$methods下的方法，並將其this指向this.$data
            node.addEventListener("click",this.$methods[attrVal].bind(this.$data))
        }
        if(node.hasAttribute("v-model")){// 該節點是否擁有v-model指令
            let attrVal=node.getAttribute("v-model");// 得到指令對應的數據屬性
            node.addEventListener("input",((i)=>{// 爲指令添加input事件
                this.binding[attrVal].push(new Watcher(node,"value",this,attrVal));// 爲該數據添加訂閱者
                return ()=>{
                    this.$data[attrVal]=nodes[i].value;// 更新$data的屬性值，會在觀察者中進行劫持
                }
            })(i))
        }
        if(node.hasAttribute("v-html")){// 該節點是否擁有v-html指令
            let attrVal=node.getAttribute("v-html");// 得到指令對應的數據屬性
            this.binding[attrVal].push(new Watcher(node,"innerHTML",this,attrVal));
        }
        if(node.hasAttribute("v-text")){// 該節點是否擁有v-text指令
            let attrVal=node.getAttribute("v-text");// 得到指令對應的數據屬性
            this.binding[attrVal].push(new Watcher(node,"innerText",this,attrVal));
        }
    }
}
function Watcher(el,attr,vm,val){// 觀察者
    this.el=el;     // 指令所在的元素
    this.attr=attr;// 綁定的屬性名
    this.vm=vm;    // 指令所在實例
    this.val=val;  // 指令的值
    this.update(); // 更新視圖view
}
Watcher.prototype.update=function(){
    this.el[this.attr]=this.vm.$data[this.val];
}

三.效果圖數組

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。