vue2的响应式原理基于object.defineProperty实现,其核心思想是通过劫持对象的访问修改操作来实现数据的响应式更新。
基本流程:
在vue对象创建时,vue会调用observe方法,将data对象转成响应式对象,observe内部会遍历data对象的所有属性,为每个属性设置getter与setter,data对象中的没个属性都会创建一个dep(依赖)对象,用于收集依赖和通知更新
当访问响应式对象的属性时,会触发getter,getter内部会手机当前正在执行的watcher,将watcher添加到该属性的对应dep中,这样就建立了属性与watcher之间的关联。
watcher是一个观察者,用于收集依赖并在数据发生变化时触发回调函数
watcher对象会在创建时先调用一次getter进行初始化,出阿发属性的依赖收集过程
当修改响应式对象的属性时,会触发属性的setter,setter内部会通知该属性对应的dep,调用dep的notify方法,notify方法会遍历该属性的所有watcher,然后调用watcher中的update方法
在watcher的update方法中会执行回调函数,比如重新渲染组件或者是更新计算属性的值。
vue3中的响应式是利用proxy代理+Reflect反射实现的
Proxy代理它是一种强大的特性,它允许创建一个代理对象来实现对目标对象的访问或者修改
它是通过newProxy去创建一个代理对象,他又两个参数,第一个是目标对象,第二个是handler拦截操作,可以在handler中预定义一组拦截操作,若我们访问或者修改属性时,会触发对应的拦截操作,每个拦截操作都对应一个拦截器函数,在拦截器函数中第一逻辑从而实现数据响应式