• <abbr id="chdyf"></abbr>
    <ruby id="chdyf"><acronym id="chdyf"><meter id="chdyf"></meter></acronym></ruby>
    <bdo id="chdyf"></bdo>
    <dfn id="chdyf"><menu id="chdyf"></menu></dfn>
    1. <menuitem id="chdyf"></menuitem><strong id="chdyf"><menu id="chdyf"></menu></strong>

      <rt id="chdyf"><menu id="chdyf"></menu></rt>
      成人小说一区二区三区,伊人精品成人久久综合全集观看,久久HEZYO色综合,中文字幕精品人妻熟女,影音先锋成人网站,我要看免费一级毛片,中国女人做爰A片,中文字幕av久久爽Av

      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.wtxcl.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務

      日歷

      鏈接

      個人資料

      藍藍設計的小編 http://www.wtxcl.cn

      存檔