简单介绍 defineReactive
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, intial-scale=1">
<title>Vue 响应式解析</title>
</head>
<body>
<div id="app"></div>
<script>
const app = document.getElementById('app')
// 对单个对象使用响应式绑定
function defineReactive(obj, key, val) {
// 监听嵌套对象
observe(val)
Object.defineProperty(obj, key, {
get() {
console.log(`get ${
key}: ${
val}`)
return val
},
// 除了要改变资深的值
// 还要触发与之相关值的变化
set(newVal) {
if (newVal !== val) {
// 保证如果 newVal 是对象，再次做响应式处理
observe(newVal)
val = newVal
update()
}
}
})
}
// 数据更新后要触发的更新动作，如通知视图发生变化
function update() {
app.innerText = obj.foo
}
// 使对象的第一层数据变成响应式
function observe(obj) {
if (typeof obj !== 'object' || obj === null) return
Object.keys(obj).forEach((key) => {
defineReactive(obj, key, obj[key])
})
}
// 处理对象动态新增的属性
function set(obj, key, val) {
defineReactive(obj, key, val)
}
</script>
</body>
</html>
手撸 Vue
先上图
接下来会将上图各部分分开解析
使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name
最低0.47元/天 解锁文章
497
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
