vue|响应式实现 vue.js

【vue|响应式实现】我们知道Vue是一个MVVM框架，它一个核心思想就是数据驱动。数据驱动就是指视图是由数据驱动生成的，我们若想让视图改变，要通过修改数据来进行修改，而不是像原始 JS那样直接操作DOM。
响应式？首先了解一下Vue是如何实现数据驱动的，这是一幅Vue官方的配图。

文章图片

黄色那一块是Vue负责渲染的render function，当视图初始化以及视图更新时都会调用这个render function。
而每次渲染时都会无法避免地触碰到我们的数据，也就是图中紫色的data部分。渲染时通过触发涉及数据的getter，把涉及数据作为依赖收集到watcher中。（而且这个watcher在每个组件实例中都会对应有一个）
所以在后面我们修改这些收集到的依赖数据时，就会触发数据的setter。setter方法会修改数据的值并通知（notify）给watcher，最后watcher再触发render funnction进行视图的重新渲染。

上面说的就是Vue实现数据驱动的过程，可以看出来实现数据驱动的关键是让我们的数据变成响应式，而getter和setter这两个方法又是让数据变成响应式的关键。
但是我们写在data中的原始数据并没有对应功能的getter和setter啊？其实这就是Vue的工作：重写数据的getter和setter。
Vue2 那么Vue是怎么实现数据的响应式的？首先我们来看一下Vue2的实现原理。
Vue3 两者的对比