map和weakMap 的区别

1键类型

Map 的键可以是任何类型的值,包括基本类型和引用类型。而 WeakMap 的键只能是对象类型,当weakMap中某个键对象没有被其他地方引用,那么在垃圾回收时就会被自动回收。

2引用关系

Map 中的键值对之间是强应用关系,只要 Map 对象存在,其中的键值对就不会被自动回收。而 WeakMap 中的键值对为弱引用,如果你在 WeakMap 中使用的是某个对象的引用作为键,那么这个对象被回收后,对应的键值对也会被自动删除。

3大小和性能

Map 对象可以通过 size 属性获取它的大小,而 WeakMap 对象没有 size 属性(因为属性可能随时被垃圾回收机制回收)。由于 WeakMap 需要额外的内存管理机制,所以它比 Map 更消耗性能,而且 WeakMap 也没有提供 Map 全部的方法。

综上所述,WeakMap 适用于需要存储私有数据或者需要临时存储数据的场景,而 Map 则适用于需要存储和访问多个数据的场景。

v3中的响应式数据依赖收集,将依赖存储在桶中,这个桶便是weakMap集合;weakMap的键为当前的响应式对象,值为一个Map集合;Map集合中的键为当前响应式对象的属性,值为Set集合;Set集合中存储了当前响应式对象某个属性的所有副作用函数

map和weakMap 的区别_第1张图片

V3中依赖收集是一种懒收集:

在 Vue 3 中,引入了懒收集(Lazy Collection)的概念,它对于 Vue 组件的更新和渲染性能带来了一些好处:

(1)减少不必要的依赖追踪:Vue 3 的懒收集机制可以减少不必要的依赖追踪。 Vue2 中,每个组件的模板在渲染过程中会被完全解析,即使其中的一部分内容实际上并不需要被渲染或更新。而在 Vue 3 中,只有在需要时才会进行依赖追踪,这意味着没有被使用的数据不会触发不必要的更新。

(2)提高渲染性能:由于只追踪被使用的数据,Vue 3 可以更快速地进行虚拟 DOM 的比对和渲染,从而提高整体的渲染性能。懒收集机制避免了不必要的计算和 DOM 操作,使得组件的更新变得更加高效。

(3)更好的响应性:懒收集机制有助于实现更精确的响应性跟踪。当某个数据发生变化时,Vue 3 只会更新与该数据相关的部分,而不需要重新计算整个组件。这可以减少不必要的计算和渲染,提高响应性能。

总而言之,Vue 3 的懒收集机制通过减少不必要的依赖追踪、提高渲染性能和实现精确的响应性,带来了更好的性能表现。这使得开发者可以更高效地构建复杂的应用程序,并提供更流畅的用户体验。

你可能感兴趣的:(vue.js,javascript,前端)