<address id="ttjl9"></address>
      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      

      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>
          
  
      
    

          

	
          
		
          
			
          
				
          vue 數據雙向綁定原理
          
				
           2021-10-11      前端達人      
          
			
          
			
          
				


          


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

          


          
一小段手寫實現代碼

          
僅供參考
          

          
    
          
        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)
    
          
    
          
        },
    
          
    
          
        })
    
          
    
          
        })
    
          
    
          
        }
    
          

          

          
    1
          
    
          
        藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
    
          
    
          
        藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
    
          

          				
          
								
			
          
		
          
		
		
	
          


          
    
  
          
    
          日歷
          
    
          
        
          
        
    
          
  
          
    
    
          
      
          鏈接
          
      
            
                
          
    
          
    
          
      
          個人資料
          
      
          
          
          
                    
          
          
          藍藍設計的小編
          http://www.syprn.cn
          
      
          
    
          
    
          
      
          存檔
          
      
    
          

          

          



亚洲va欧美va天堂v国产综合