vue雙向資料繫結的實現
阿新 • • 發佈:2018-12-03
總所周知,偵測一個物件變化的方法,常用的兩種是Object.defineProperty,和es6的proxy,下面就基於Object.defineProperty實現簡單的雙向繫結
其實vue主要是通過Object.defineProperty實現的,至於vue3.0會不會重寫就不得而知,這也是為什麼物件的新增屬性不好檢測的原因!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<h1 id="test">阿西吧</h1>
<body>
<script>
let view = document.querySelector('#test')
let obj = {
'a': '123',
'b': '456'
}
Object.defineProperty(obj, 'a', {
set: function (newValue) {
console.log(newValue,123)
view.textContent = newValue
},
get: function () {
console. log(456)
}
})
</script>
</body>
</html>
就這樣一個簡單的demo就實現了!
開始是這樣的:
當obj.a改變時,檢視自動更新!