标签: Vue.js

本文介绍了使用`WeakMap`和`Proxy`实现简化版Vue3响应式系统的原理和实现。关键问题在于如何自动追踪依赖和避免内存泄漏。解决方案是利用`WeakMap`存储对象依赖关系，Proxy拦截get/set操作，实现依赖收集和触发。

VueUse 的 `toReactive` 用于将包含多个 `ref` 的对象转换为响应式对象，避免访问时频繁使用 `.value`。适用场景为批量解包 ref，不适用于单个 ref 或对象属性非 ref 的情况。替代方案包括 `toRef`、模板自动解包或 `computed`。

本文对比了 Vue 3 中 `watch` 和 `watchEffect` 的区别。`watch` 仅在依赖值真正改变时触发，而 `watchEffect` 只要依赖的响应式数据 setter 被调用就会重新执行。示例代码清晰展示了同值赋值时 `watchEffect` 触发而 `watch` 不触发的现象。

Vue 组件卸载前需暂停音频播放。`onBeforeUnmount` 在 DOM 卸载前执行，可访问 DOM 元素；`onUnmounted` 在 DOM 卸载后执行，无法访问。因此，应使用 `onBeforeUnmount` 来确保在 DOM 销毁前暂停音频，避免潜在错误。

本文介绍了前端架构模式 MVVM，重点在于 Vue.js 如何利用 MVVM 实现数据驱动视图。核心在于双向数据绑定和数据劫持，解决了手动操作DOM的问题，但同时也存在调试困难和内存开销大的缺点。