伊人久久大香线蕉综合影视_日韩精品少妇无码受不了_71pao成人国产永久免费视频_国产伦片中文免费观看_国产高清无码麻豆精品_九色综合伊人久久富二代_日韩黄色精品_日韩A∨精品日韩精品无码

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

1

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系。

藍藍設計( www.cqzjtgb.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務

日歷

鏈接

個人資料

藍藍設計的小編 http://www.cqzjtgb.com

存檔

齐河县| 都江堰市| 阿荣旗| 双峰县| 江山市| 柘城县| 贡嘎县| 威信县| 高雄市| 焦作市| 辰溪县| 邢台市| 苍梧县| 蓬莱市| 台北县| 刚察县| 泸水县| 安宁市| 清涧县| 万山特区| 咸宁市| 东辽县| 华安县| 错那县| 河津市| 建阳市| 八宿县| 揭阳市| 麻阳| 中方县| 铅山县| 呼伦贝尔市| 乐安县| 吉木乃县| 海丰县| 绥德县| 乌鲁木齐县| 张家川| 龙井市| 永靖县| 阿城市|