老司机91精品网站在线观看-老司机67194免费观看-老司国产精品视频-老熟人老女人国产老太-中文字幕日本在线-中文字幕日本一区久久

vue 數(shù)據(jù)雙向綁定原理

2021-10-11 前端達人

首先我們?yōu)槊總€vue屬性用Object.defineProperty()實現(xiàn)數(shù)據(jù)劫持，為每個屬性分配一個訂閱者集合的管理數(shù)組dep；然后在編譯的時候在該屬性的數(shù)組dep中添加訂閱者，v-model會添加一個訂閱者，{{}}也會，v-bind也會，只要用到該屬性的指令理論上都會，接著為input會添加監(jiān)聽事件，修改值就會為該屬性賦值，觸發(fā)該屬性的set方法，在set方法內通知訂閱者數(shù)組dep，訂閱者數(shù)組循環(huán)調用各訂閱者的update方法更新視圖。

一小段手寫實現(xiàn)代碼

僅供參考

        class Vue {
    
        constructor(option){
    
        this.$data = option.data 
    
        Observe(this.$data)
    
        Object.keys(this.$data).forEach((key)=>{
    
        Object.defineProperty(this,key,{
    
        enumerble: true,
    
        configurable: true,
    
        get(){
    
        return this.$data[key]
    
        },
    
        set(newVal){
    
        this.$data[key] = newVal 
    
        },
    
        })
    
        })
    
        }
    
        }
    
        function Observe (obj){
    
        if(!obj || typeof obj !== 'object') return 
    
        Object.keys(obj).forEach((key)=>{
    
        let value = obj[key]
    
        Observe(value)
    
        Object.defineProperty(obj,key,{
    
        enumerble: true,
    
        configurable: true,
    
        get(){
    
        console.log('有人獲取了 ${key} 的值')
    
        return value 
    
        },
    
        set(newVal){
    
        value = newVal 
    
        Observe(value)
    
        },
    
        })
    
        })
    
        }