00-1010

1、Vue 3.0 性能提升主要是通过哪几方面体现的？

vue2使用definepropery为数据中的每个属性调用getter和setter，使它们在初始化过程中成为响应对象。如果属性值是一个对象，defineproperty也将被递归调用，使其成为一个响应对象。

Vue3使用代理对象覆盖响应。代理的性能优于定义的性能。proxy可以拦截属性的访问、分配、删除等操作，无需在初始化时遍历所有属性。此外，如果有多层属性嵌套，则只有在访问某个属性时，才会递归处理下一层属性。

00-1010可以监控动态添加的属性；可以侦听已删除的属性；可以监听数组的索引和长度属性；00-1010优化了虚拟dom的编译和重写，首次大幅提升了渲染和更新dom的性能。vue2优化diff算法vue3，通过标记静态根节点来标记和升级所有静态根节点，diff期间只比较动态节点的内容。

片段，不需要在模板中创建唯一的根节点，可以直接放置对等标签和文本内容。

1.响应式系统提升

补丁标志，跳过静态节点，直接比较动态节点，缓存事件处理功能。

00-1010vue3删除了一些不常见的API，如内联模板、过滤器等。使用摇树

2.Vue 2.x使用的合成Api和选项API有什么区别？

00-1010包含描述组件选项的对象选项；(数据、方法、道具等。);

API开发复杂的组件，同一功能逻辑的代码拆分成不同的选项；

使用mixin复用常用代码也存在一些问题：命名冲突，数据源不清晰；

00-1010Vue3是一套新的API，是基于功能的API，可以更灵活地组织组件的逻辑。

解决了options api在大型项目中不易拆分复用的问题。

3.相对于对象的代理。定义属性

有什么优势？

代理的性能优于定义的性能。proxy可以拦截属性的访问、分配、删除等操作，无需在初始化时遍历所有属性。此外，如果有多层属性嵌套，则只有在访问某个属性时，才会递归处理下一层属性。

你可以*听数组变化，劫持整个对象。操作时，不是原来的对象，而是新Proxy返回的新对象。有13种操作可以被劫持。4.Vue 3.0编译中有哪些优化？

Vu.js3.x标记并提升所有静态节点，diff时只需要比较动态节点的内容；

模板中不需要唯一的根节点，但是可以直接放置文本或对等标签。

hoistStatic:当使用HoistStatic时，所有静态节点都被提升出渲染方法。它们将在应用程序启动时只创建一次，然后只需要由应用程序提取的静态节点将在每次呈现时重用。

PatchFlag，在动态标签的末尾添加对应的标签，只有带有patch flag的节点才能被认为是动态元素，会通过跟踪属性进行修改，不需要逐层遍历就可以快速找到动态节点，从而提高了virtual dom diff的性能。

CacheHandler，一个事件处理程序，被缓存以避免重新生成一个全新的函数来更新之前的函数树抖动。通过摇动树，核心库的容量被优化以减少不必要的代码。

5.vue.js3.0响应系统的实现原理？

00-1010将对象设置为响应对象。接收一个参数，判断它是否是一个对象。如果对象不是，将直接返回该参数，而不进行反应式处理。创建拦截器handerler并设置get/set/deleteproperty。

00-1010采集轨迹；如果当前键的值是一个对象，请为当前键设置get/set/deleteproperty以创建拦截器处理程序。如果当前键的值不是对象，则返回当前键的值。

，当新值和旧值不相等时，会更新为新值并触发触发器。

删除属性当当前对象有这个键时，删除这个键并触发更新。

00-1010接收函数作为参数。函数：在访问响应对象属性时收集依赖关系。

00-1010

-如果没有活动效果，则没有创建效果依赖关系。

-如果有活动效果，确定WeakMap集合中是否有目标属性。

- WeakMap集中没有目标属性，然后设置(目标，(depsMap=new Map())

如果- WeakMap集合中有目标属性，则判断该目标属性的地图值的depsMap中是否有关键属性。

如果-depsmap中没有键属性，则set (key，(dep=new set())-deps map有键属性，则添加此activeEffect。

00-1010判断WeakMap中是否有目标属性，如果WeakMap中有目标属性，则判断目标属性的地图值中是否有关键属性，如果有，则循环触发采集效果()。