首先创建一个名为kvue.js的文件
class Kvue {
constructor(option) {
// 获取data
this._data = option.data
// 获取data里面的对象-观察者
this.observer(this._data)
}
observer(obj) {
if(typeof obj !== 'object') return
Object.keys(obj).forEach(key => this.defineReactive(obj, key, obj[key]))
}
cb() {
console.log('更新数据')
}
defineReactive(obj, key, val) {
this.observer(val)
let staging = val
let _this = this
Object.defineProperty(obj, key, {
get() {
console.log(`获取${key}数据`)
return staging
},
set(newVal) {
staging = newVal
// 如果newVal不等于val则表示数据更新了，相应的变化也要跟着数据的变化而变化
if(newVal !== val) {
console.log(`更新${key}数据`)
_this.cb()
}
}
})
}
}
然后在一个html文件中引用这个js文件，并new这个kvue类
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="Kvue.js"></script>
</head>
<body>
</body>
<script>
const kvue = new Kvue({
data: {
msg: {
detail: "lll"
},
test: "2348"
}
})
console.log(JSON.stringify(kvue._data), kvue._data.test)
kvue._data.test = '测试'
kvue._data.msg.detail = '12083'
console.log(JSON.stringify(kvue._data), kvue._data.test)
kvue._data.msg.detail = '12083'
console.log(JSON.stringify(kvue._data), kvue._data.test)
</script>
</html>
在浏览器中直接打开这个html文件可以看到打印情况
