vue响应式原理

介绍

什么是数据响应式？
我们只需要关注数据本身，当数据变化的时候，视图也会随之更新

vue2.x

vue2.x实现响应式的核心是使用Object.defineProperty，因为该方法只能处理属性，所以需要遍历vue实例的所有属性，并通过这个方法将这些属性转化为getter/setter，这里相当于拦截器的作用，无论是访问实例的属性还是设置其属性，都要先通过getter/setter。具体在setter方法中，其实还是操作了DOM，然后才能更新视图

官网中也说到了“Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。”

具体讲vue2.x响应式原理的核心就是利用object.defineProperty()为vue实例中data的每一个属性添加getter、setter方法，基于观察者模式，当数据发生变化的时候，更新视图

观察者模式就是一个dep类，负责添加观察者，发布通知；另一个是watcher类，负责更新视图。每当获取属性使用getter的时候，就添加观察者；当设置属性用setter的时候，就发布通知，调用观察者的update方法更新视图

创建dep类的实例为每一个data中的属性，在compliler类（用来解析指令和差值表达式）中，为每一个渲染模板的函数添加watcher实例。这样只要数据发生变化，那与这个数据相关的视图都会得到更新

vue3

vue3的响应式是通过proxy完成，Proxy直接监听对象，而非属性，所以将多个属性转换成getter/setter的时候，不需要使用循环