vue的双向绑定原理
于2023-10-08 22:19:47发布
39
vue 在实例化的时候,使用 Object.definePropety() 方法或 Proxy 构造函数,对 data 进行 getter 和 setter 的处理。在组件渲染时,若用到 data 里的某个数据,这个数据就会被依赖收集进 watcher 里。当数据更新,如果这个数据在 watcher 里,就会收到通知并更新,否则不会更新——vue 采用“数据劫持”+“观察者模式(发布者-订阅者模式)”相结合的方式实现了双向绑定——vue 的响应式原
下面用一个简单的例子来解释
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue 的双向绑定原理</title>
</head>
<body>
<div>
<p class="p1"></p>
<input type="text" oninput="person.name = this.value">
</div>
<script>
var person = {
name: '林春逢',
}
function showName() {
document.querySelector('.p1').innerHTML = person.name; // 这里会触发get
}
function observe(obj) {
for (let key in obj) {
let originalData = obj[key]
let funcs = [];
Object.defineProperty(obj, key, {
set: (val) => {
// 这里不能直接obj[key] = val,不然会在触发一次set,这样就死循环了
originalData = val
// 派发更新,运行执行用我的函数
for (let i = 0; i < funcs.length; i++) {
funcs[i]()
}
},
get: () => {
// 依赖收集,记录哪个函数在用我
if (window._func && !funcs.includes(window._func)) {
funcs.push(window._func)
}
return originalData
}
})
}
}
function autoRun(func) {
window._func = func
func()
window._func = null
}
observe(person) // 观察
autoRun(showName)
</script>
</body>
</html>