在掘金上買了乙個關於解讀vue原始碼的小冊，因為是付費的，所以還比較放心
在小冊裡看到了關於vue雙向繫結和依賴收集的部分，總感覺有些怪怪的，然後就自己跟著敲了一遍。 敲完後，發現完全無法執行， 坑啊， 寫書人完全沒有測試過。
然後自己完善**， 越寫越發現坑， 問題有些大。。。。。。
最後自己重新實現了一遍，**較多。 用到觀察訂閱者模式實現依賴收集， object.defineproperty() 實現雙向繫結
/*自己寫的**, 實現vue的雙向繫結和依賴收集
場景: 多個子元件用到父元件data中的資料, 當父元件data中的此資料發生改變時,
所有依賴它的 子元件全部更新
通常子元件的從父元件中拿取的資料不允許發生改變
*///
訂閱者 dep
//乙個訂閱者只管理乙個資料
class
dep
addsubs (sub)
notify () )}}
//監聽者
//乙個vue例項包含乙個watcher例項
class
watcher
update ()
}//對data中的資料設定讀寫監聽, 並且建立訂閱者, 用於收集子元件的依賴和發布
function definereactive (obj, key, value)
//return obj[key] 此寫法報錯 提示棧溢位 原因是無限呼叫get()
return
value
},set (newval) }})
}//接收乙個物件作為引數, 將該物件的所有屬性呼叫definereactive設定讀寫監聽
function observer (obj)
object.keys(obj).foreach( key =>)
}//建構函式, 監聽 配置options中的data()方法返回的物件的所有屬性 的讀寫
class
vue
//例項化該元件的子元件
this._children = options.render ? (options.render() ||{}) : {}}}
//父元件資料
let data =
let times = 0
//第一次呼叫返回的是第乙個子元件的從父元件繼承的資料(vue中props屬性的值)
//第二次呼叫返回的是第二個子元件的從父元件繼承的資料(vue中props屬性的值)
function getprops ()
object.keys(obj).foreach( key =>
else
})return
obj }
else
if (times == 2
) object.keys(obj).foreach( key =>
else
})return
obj }
}let vue_root = new
vue(,
props:
true
, render () {}
}) let vue_2 = new
vue(,
props:
true
, render () {}
}) return}})
console.log(vue_root)
vue_root._data.first = '
hello hello'//
vue_1 和 vue_2 都依賴此資料, 都更新
vue_root._data.third = "
aaa"
//只有 vue_2 依賴到了此資料, 更新
vue 單相繫結 Vue的單向繫結和雙向繫結
1 單向繫結 單向資料繫結的實現思路 所有資料只有乙份 一旦資料變化，就去更新頁面 只有data dom，沒有dom data 若使用者在頁面上做了更新，就手動收集 雙向繫結是自動收集 合併到原有的資料中。單項繫結 如下 html 2 雙向繫結 資料的雙向繫結是vue實現的一大功能。使用v mode...
Vue雙向繫結
把乙個普通物件 a 傳給 vue 例項作為它的 data 選項，vue.js 將遍歷它的屬性，用object.defineproperty 將它們轉為 getter setter,如圖綠色的部分所示。每次使用者更改data裡的資料的時候，比如a.b 1，setter就會重新通知watcher進行變動...
Vue 雙向繫結
在react或者vue這類mvvm框架中使用雙向繫結是很常見的需求，最近專案中在使用vue，今天來談一談vue中雙向繫結的實現。先來說幾句廢話 什麼是雙向繫結？把model中的資料繫結到view中，然後更新model時view會自動跟新，這叫單向繫結，而當使用者改變view時model中資料也能自動...