实现响应式的原理
首先创建一个名为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文件可以看到打印情况