Vue3.0的性能提升主要有哪些方面？响应式系统升级Vue2.0在代理对象中初始化属性时，使用definePropertydefineProperty来处理data中的数据。如果属性是对象类型，则需要递归处理。Vue3.0使用Proxy对象重写了响应式系统。Proxy代理整个对象调用递归时，可以监听动态添加的属性。您可以收听已删除的属性。可以监听数组的索引和长度属性。通过标记静态根节点和优化diff过程来编译和优化Vue2.0。在Vue3.0中，所有静态根节点都被标记和提升，diff只需要比较动态节点内容Fragments静态改进Patchflag缓存事件处理功能源代码大小优化Vue3.0去除了一些不常用的APIinline-tempalte，filterTree-shaking的组合Vue3.0使用的Api和Vue2.x使用的OptionsApi有什么区别？Vue2.0OptionsApi使用data、methods、computed和watch在vue文件中定义属性和方法，共同处理页面逻辑问题：当组件开始变大时，逻辑关注点列表也会变长。这会使组件难以阅读和理解，尤其是对于那些一开始就没有编写它们的人。//src/components/UserRepositories.vueexportdefault{components:{RepositoriesFilters,RepositoriesSortBy,RepositoriesList},props:{user:{type:String,required:true}},data(){return{repositories:[],//1过滤器：{...},//3searchQuery:''//2}},计算：{filteredRepositories(){...},//3repositoriesMatchingSearchQuery(){...},//2},watch:{user:'getUserRepositories'//1},methods:{getUserRepositories(){//使用`this.user`获取用户存储库},//1updateFilters(){...},//3},mounted(){this.getUserRepositories()//1}}Vue3.0CompositionApiCompositionAPI中，代码按照功能逻辑组织，一个功能的所有API都会放在一起（高内聚，低耦合）)//src/components/UserRepositories.vueimport{toRefs}from'vue'importuseUserRepositoriesfrom'@/composables/useUserRepositories'importuseRepositoryNameSearchfrom'@/composables/useRepositoryNameSearch'importuseRepositoryFil吨来自'@/composables/useRepositoryFilters'的ers导出默认值{components:{RepositoriesFilters,RepositoriesSortBy,RepositoriesList},props:{user:{type:String,required:true}},setup(props){const{user}=toRefs(props)const{repositories,getUserRepositories}=useUserRepositories(user)const{searchQuery,repositoriesMatchingSearchQuery}=useRepositoryNameSearch(repositories)const{filters,updateFilters,filteredRepositories}=useRepositoryQuurchenFilters(repositoriesMatching)const{因为我们不关心未过滤的repositoriesQuurchenMatching)Repositories//我们可以在`repositories`名称下公开过滤结果存储库：filteredRepositories,getUserRepositories,searchQuery,filters,updateFilters}}}Proxy比Object.defineProperty有什么优势？defineProperty代理对象中的某个属性，Proxy代理整个对象defineProperty无法监听数组下标的变化，可以使用ProxyVue3.0在编译方面有哪些优化？Vue2.0通过标记静态根节点优化diff过程Vue3.0标记并提升所有静态根节点点，diff只需要对比动态节点内容Fragments静态改进Patch标志缓存事件处理函数Proxy和reflectreflect中的receiver指向问题？Proxy中的receiver指向代理实例constproxy=newProxy({},{get:function(target,key,receiver){returnreceiver;}});proxy.getReceiver===proxy//trueReflectifthereceiverproperty如果部署了读函数（getter），则将读函数的this绑定到receivervarmyObject={foo:1,bar:2,getbaz(){returnthis.foo+this.bar;},};varmyReceiverObject={foo:4,bar:4,};Reflect.get(myObject,'baz',myReceiverObject)//8Reflect.set一旦receiver通过，属性就会赋值给receiver(即obj)，会触发defineProperty拦截letp={a:"a",};让处理程序={设置（目标，键，值，接收器）{控制台。日志（“设置”）；反映。设置（目标、键、值、接收者）；},defineProperty(target,key,attribute){控制台。日志（“定义属性”）；Reflect.defineProperty（目标，键，属性）；},};letobj=newProxy(p,handler);obj.a="A";//set//definePropertyVue.js3.0响应式系统实现原理?Vue3.0的reactive系统是一个独立的模块，完全可以脱离Vue使用。整个反应系统无非就是反应和效果方法。get：收集依赖，递归地将代理对象转化为响应式对象set：更新值并触发更新deleteProperty：删除并触发更新效果：立即执行传入的函数，同时响应式跟踪其依赖，当其依赖发生变化时重新运行函数dependencycollection-track当effect立即执行时，会触发代理对象的getter方法，get方法会调用里面的track方法建立属性和对应effect函数的依赖关系letactiveEffect=nullfunctioneffect(callback){activeEffect=callbackcallback()activeEffect=null}lettargetMap=newWeakMap()functiontrack(target,key){if(!activeEffect)返回letdepsMap=targetMap.get(target)if(!depsMap)targetMap.set(target,(depsMap=newMap()))letdep=depsMap.get(key)if(!dep)depsMap.set(key,(dep=newSet()))dep.添加（activeEffect）}触发date-triggerupdate/删除属性时触发代理对象的setter方法，setter内部调用trigger方法执行更新操作。trigger会在依赖记录中查找对应字段依赖的effect并执行)if(dep){dep.forEach(effect=>{effect()})}}
