petite-vue源码逐行解析，@vuereactivity中reactive函数如何实现？

本文共计4724个文字，预计阅读时间需要19分钟。

在petite-vue中，我们利用reactive构建上下文对象，并将根状态逻辑作为参数传递给effect。这样一来，当状态变化时，effect会自动触发UI重绘。

在petite-vue中我们通过reactive构建上下文对象，并将根据状态渲染UI的逻辑作为入参传递给effect，然后神奇的事情发生了，当状态发生变化时将自动触发UI重新渲染。那么到底这是怎么做到的呢？
@vue/reactivity功能十分丰富，而petite-vue仅使用到reactive和effect两个最基本的API，作为入门本文将仅仅对这两个API进行源码解读。

一切源于Proxy

我们知道Vue2是基于Object.defineProperty拦截对象属性的读写操作，从而实现依赖收集和响应式UI渲染。而@vue/reactivity作为Vue3的子项目，采用的是ES6的Proxy接口实现这一功能。