<!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>
<h2>vue如何让每个月属性都可被观测</h2>
<script type="module">
import { Observer } from './observer.js'
let obj = new Observer(
{
name:'小明',
age:18
}
)
console.log(obj.value.name)
obj.value.age = 25
</script>
</body>
</html>
export class Observer{
constructor(value){
this.value = value
if(Array.isArray(value)){
// 数组重写。。
}else{
this.walk(value)
}
}
walk(obj){
const keys = Object.keys(obj)
for(let i= 0;i<keys.length;i++){
defineReactive(obj,keys[i])
}
}
}
//循环 让对象每个属性可观测
function defineReactive(obj,key,val){
if(arguments.length ===2){
val = obj[key]
}
if( typeof val === 'object'){
//递归
}
Object.defineProperty(obj,key,{
enumerable:true, //可枚举
configurable:true,//可改变
get: function(){
console.log("取之",val)
return val
},
set: function(b){
console.log(b,"改之")
val = b
}
})
}
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· winform 绘制太阳，地球，月球 运作规律
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具