vue底层原理核心代码
body区域
<div id="app">
</div>
js区域
let data = {shuzi:0}
let active
// active = ()=>{
// app.innerHTML = data.shuzi
// }
function xiangyingshi(data) {
console.log('这里开始核心逻辑了')
for(let key in data) {
let value = data[key] //对象对应的值
// 选择的value 0
let dep = []
// dep = [ ()=>{
// // app.innerHTML = data.shuzi
// // }]
Object.defineProperty(data,key,{
get(){
console.log('已经进入Object.definePropertyget里面了')
if(active) {
dep.push(active)
}
return value
},
set(newValue) {
console.log('已经进入Object.defineProperty set里面了')
value = newValue
dep.forEach(asasa =>asasa())
}
})
}
}
//传入了一个data 进行 Object.defineProperty 的一个绑定 绑定的结果 获取值的时候用get
//设置值的时候用 set
xiangyingshi(data)
const watcher = (fn)=>{
active = fn
fn()
active = null
}
watcher(()=>{
app.innerHTML = data.shuzi
})