这是我新坑的第一篇文章，这个坑就是vue3，接下来我将围绕vue3进行一系列的操作，包括但不限于：完整源码分析jsx项目最佳实践个性化jsx解决方案vue3生态库开发（目前有一个在进行中）和可能定制一个vue3运行时关于源码分析，网站已上线，vue3源码analysis，最佳实践，网站是逐行代码形式的分析，更侧重于源码，而掘金上分享的文章类似于总结，会写成更复杂的文章结构.如果你想继续关注vue3的源码，可以打开之前的网址关注我。所以，我们走吧！vue3最大的变化就是对响应式原理的重构，以及新发布的compositionapi。本文主要针对前者，深入剖析响应式在vue3中是如何实现的。我们以reactiveAPI为例，constComp={setup(){conststate=reactive({a:'jokcy'})return()=>{returnstate.a=e.target.value}/>}}}我们看上面的例子，这个例子很简单，创建一个组件，他有一个响应式数据对象，然后绑定input中的值render什么是state.a，他的onChange会修改state.a。这是一个非常简单直观的数据绑定的例子，而这个逻辑的根本原因是当我们调用state.a=xxx时，vue会重新渲染我们返回的render函数来更新节点。这篇文章就是来看看我们通过reactive创建的对象的魔力，可以帮助我们完成这个任务。实际上，API本身非常简单。传入一个对象并返回一个反应对象。创建方法是createReactiveObjectexportfunctionreactive(target:object){//如果试图观察只读代理，返回只读版本。if(target&&(targetasTarget)[ReactiveFlags.IS_READONLY]){返回目标；}returncreateReactiveObject(target,false,mutableHandlers,mutableCollectionHandlers);}functioncreateReactiveObject(target:Target,isReadonly:boolean,baseHandlersection:ProxyHandler,){//前面是判断逻辑对象已经被代理等，这里就不展示了。constobserved=newProxy(target,collectionTypes.has(target.constructor)?collectionHandlers:baseHandlers);def(target,isReadonly?ReactiveFlags.READONLY:ReactiveFlags.REACTIVE,observed);returnobserved;}那么这里最重要的就是新建Proxy了。可以说理解vue3的responsive原理过程就是理解创建这个proxy的过程，而理解这个过程，主要是看第二个参数，也就是这里的collectionHandlers或者baseHandlers，大部分都是后者，前者主要针对Set、Map等。然后我们看看baseHandlers：exportconstmutableHandlers:ProxyHandler
