實現代碼💻：
<body>
<div id="#app"></div>
<script>
// TODO 定義一個對象響應式原理 ⏰
function defineReactive(obj, key, val) {
Object.defineProperty(obj, key, {
get() {
// console.log('Get方法:', val)
return val
},
set(newVal) {
if (val !== newVal) {
val = newVal
// console.log('Set方法：', val)
update(val)
}
}
})
}
// 更新函數
function update(val) {
document.getElementById('#app').innerHTML = val
}
var obj = {}
// 將obj.foo 註冊爲響應式
defineReactive(obj, 'foo', '初始值')
// 設置初始值
obj.foo = new Date().toLocaleTimeString()
// 每一秒觸發一次對象的set，並更新視圖View
setInterval(() => {
obj.foo = new Date().toLocaleTimeString()
}, 1000)
</script>
</body>
實現效果🤥：
![]()
