简答题1、Vue3.0的性能提升主要有哪些方面?Vue3.0性能提升:(1)响应式系统升级Vue.js2.x中响应式系统的核心是Object.defineProperty。在Vue.js3.0中,Proxy对象用于重写响应式系统以监听动态添加的属性。deleted属性可以监控数组的index和length属性(2)编译优化在Vue.js2.x中,通过标记静态根节点,优化了diff过程。在Vue.js3.0中,所有静态节点都被标记和提升。diffing时,只需要比较动态节点内容的片段,同级别的文本内容或标签就可以直接放在模板中(升级vetur插件)。静态节点被提升到render函数外,只在初始化时执行一次,再次渲染不需要再次执行Patch标志,标记动态节点(记录节点内容,节点属性),跳过静态根节点diff时,只需要关心动态节点内容缓存事件处理函数,减少不必要的更新操作(3)源码大小优化Vue.js3.0去掉了一些不必要的常用API如:inline-template/filter等。Tree-shaking2,Vue3.0使用的CompositionApi和Vue2.x使用的OptionsApi有什么区别?OptionsApi包含一个描述组件选项(props、数据、方法等)的对象OptionsApi开发复杂的组件,将相同功能逻辑的代码拆分成不同的选项。组件逻辑和代码结构组织更灵活、更合理。功能相同的代码不需要拆分,有利于代码抽取和复用。3.Proxy相对于Object.defineProperty有什么优势?Proxy的优点:Proxy除了set和get监听外,还有其他对象的监听回调,可以监听动态添加的属性和删除的属性。有deletePropertyownKeysapply等。Proxy更好的支持数组对象的监听和监听,可以监听数组的index和length属性。Proxy以非侵入的方式监督对象的读写,不会修改原来的对象4.Vue3.0在编译有哪些优化?Vue.js3.0标记升级所有静态节点,diff时只需要比较动态节点内容Fragments的片段,可以直接在模板中放入文本内容或同级标签(vscode需要升级vetur插件)静态节点被提升到render函数外,只在初始化时Execute一次,再次渲染不需要再次执行Patch标志,标记动态节点(记录节点内容,节点属性),diff时跳过静态根节点,只需要关心动态节点内容缓存事件处理函数,减少不必要的更新操作5、Vue.js3.0响应式系统的实现原理是什么?使用Proxy对象实现属性监控。初始化时不需要遍历所有属性来嵌套其defineProperty多属性。在访问属性的过程中,对下一级属性进行处理(递归处理)。默认情况下,监视动态添加的属性。默认情况下,默认监视属性的删除。监听数组索引和长度属性的修改操作可以作为一个单独的模块使用核心方法react/ref/toRefs/computedeffect(watch函数内部使用的底层函数)track收集依赖函数trigger触发更新函数
