<!--
* @Autor: CQJ
* @Date: 2022-05-23 14:59:59
* @LastEditors: CQJ
* @LastEditTime: 2022-05-23 15:09:49
* @Description:
-->
<!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>Document</title>
</head>
<body>
<!-- 要引入一个类的话 script需要声明引入的文件类型为module -->
<script type="module">
import { Observer } from './observer.js';
let obj = new Observer({
name: 'cqj',
age: 18,
demo: {
a: '111',
b: 2
},
arr:[1,2,3,4,5]
});
// console.log(obj.value.name);
// obj.value.age = 23
console.log(obj.value.demo.a);
//没有递归调用的情况下是捕获不到的
obj.value.demo.b = 23456
obj.value.arr.push(12)
console.log(obj.value.arr)
</script>
</body>
</html>
/*
* @Autor: CQJ
* @Date: 2022-05-23 15:00:20
* @LastEditors: CQJ
* @LastEditTime: 2022-05-23 15:53:12
* @Description:对象里的任何一个数据发生变化都能监听到
*/
//vue原理 --变化侦测
export class Observer {
constructor(value) {
this.value = value;
if (Array.isArray(value)) {
//数组逻辑
this.observeArray(value);
} else {
//对象逻辑
this.walk(value);
}
}
walk(obj) {
//{name: 'cqj', age: 18}
const keys = Object.keys(obj);
for (let i = 0; i < keys.length; i++) {
defineReactive(obj, keys[i]);
}
}
observeArray(items) {
console.log("items: ", items);
for (let i = 0; i < items.length; i++) {
observe(items[i]);
}
}
}
function observe(value) {
if (!value || typeof value !== "object") {
return;
}
return new Observer(value);
}
//循环，让每一个属性都变可侦测
//技巧：如果你的函数有且仅有两个参数，那么多出来的第三个参数可作为函数的返回值
function defineReactive(obj, key, val) {
if (arguments.length === 2) {
val = obj[key]; //对象的某个值
}
if (typeof val === "object") {
//递归：如果不递归调用，那么监听不到对象的属性变化
new Observer(val);
}
Object.defineProperty(obj, key, {
enumerable: true, //可枚举
configurable: true, //可配置
get() {
console.log(`你访问了${key}`);
return val;
},
set(newVal) {
console.log(`你设置了${key},新值为${newVal}`);
newVal === val;
},
});
}
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）