厦门网站备案,云南文山地图,各种中药材初加工平台,小学生简短小新闻十条大家有没有想过#xff0c;为什么vue可以监测到数据发生改变#xff1f;其实底层借助了Object.defineProperty#xff0c;底层有一个Observer的构造函数 让我为大家简单的介绍一下吧#xff01; 我用对象为大家演示一下 const vm new Vue({el: #app,data: {ob…大家有没有想过为什么vue可以监测到数据发生改变其实底层借助了Object.defineProperty底层有一个Observer的构造函数 让我为大家简单的介绍一下吧 我用对象为大家演示一下 const vm new Vue({el: #app,data: {obj: {a: 1,b: 2}}})console.log(vm._data);我们有没有办法我们修改了数据控制台提示我们修改了这个数据
我们不借助vue来实现一下吧 let data {a: 1,b: 2}// 创建一个监测data的实例化对象let obs new Observer(data)// 准备一个vm实例对象let vm {}vm._data data obsfunction Observer(obj) {// 汇总成一个数组let keys Object.keys(obj)keys.forEach(k {// this 指向实例化对象上Object.defineProperty(this, k, {get() {return obj[k]},set(val) {obj[k] valconsole.log(k 被修改了);}})})}这是不完善的在vue的底层还有功能这里没有实现就比如vue可以直接vm.a ? 还有就是更深层次的监测需要用到递归日后为大家带来更有意思的代码
感谢大家的阅读如有不对的地方可以向我提出感谢大家
