<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>模拟Vue数据监测</title>
</head>
<body></body>
<script>
let data = {
deptName: '研发二部',
numbers: 17,
deptAge: 16,
};
let vm = new Observer(data);
/**
* Observer是一个构造函数,生成一个监听实例对象
* @param obj
* @constructor
*/
function Observer(obj) {
//拿到对象的所有属性key([])
let keys = Object.keys(obj);
// 遍历key,分别使用Object.defineProperty给当前监视对象添加属性,使得当前监视对象成为data的数据代理
keys.forEach(k => {
Object.defineProperty(this, k, {
get() {
return obj[k];
},
set(val) {
obj[k] = val;
//vue更改数据之后,再去更新视图(根据数据生成虚拟dom,使用diff算法,生成新的dom....)
console.log(`${k}属性被改变了!!!`);
},
});
});
}
/**
* 注意:这里做的只是最简单的模拟,只是对数据的浅层模拟,Vue则是对data中的数据的所有层级都进行了监听
*/
</script>
</html>
模拟Vue数据监测
最新推荐文章于 2024-10-31 14:51:07 发布