Vue 中 Observer 的用处是什么?

在看Vue的源码,产生一个疑问:

state.jsinitData() 函数中,使用的是 observe() 方法来为数据对象绑定一个Observer对象,Observer对象执行 defineReactive() 方法为数据对象设置 setter 和 getter。
而在 initProps() 函数中,通过遍历 props 选项直接对数据执行了 defineReactive() 方法来设置 setter 和 getter。

那么,同样是为数据设置 setter 和 getter,为什么 initData()initProps() 多一个 Observer 类,这个 Observer 类的功能到底是什么?

阅读 7.1k
2 个回答

简单看了一下,抛个砖

站在component的角度,props是immutable的,而data是mutable的
所以相对于props,data需要对对象的子对象以及数组内的元素都设置setter 和 getter
而props不用

所以Observer的功能,应该就是对数组元素的遍历执行defineReactive(),以及深度遍历Object为每一个子对象都执行defineReactive()
对应的就是Observer.observeArrayObserver.walk这两个方法

可能还有一些细节上的差别,但主要的应该就这两点了

Observer 类 主要做的事情就是对传入的数据 进行双向绑定!

通过Object.defineProperty来做数据劫持.然后会实例化一个Dep类(利用了发布/订阅者模式),从而对数据进行双向绑定!!!

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题