实现Observer数据劫持
2020-04-05 本文已影响0人
仔崽06
Observer的实现过程
首先创建一个Observer.js引入

实例化这个observer将需要观察的数据传递进去

这里只对Object进行了劫持,判断数据是否是object,我们利用了原生Object.defineProperty的方法(如对此不了解:请查看文章https://www.jianshu.com/p/89f5f18ca435),因为有时候对象的某个属性的属性值也可以是对象所以才去递归方式去遍历所有属性值。

由此可见对象上所有的属性都绑定了get set的方法,这里需要注意的是 我们给vm.person对象增加新的属性,或者重新赋值都不会被监听。所以我们需要在set赋值新值的时候在需要调用一下observer进行劫持监听.




这样就会对所有新增属性进行监听效果如下:

目前只实现了利用Object.defineProperty拦截并监听对象的所有属性.
下一节:实现观察者Watcher和依赖收集Dep https://www.jianshu.com/p/08b6fdd10b17