Mosu | Mosuzi的博客
·
从 Vue2 到 Vue3（一）：响应式
💡
原文中文，约3800字，阅读约需9分钟。
📝
内容提要
本文讨论了从 Vue2 到 Vue3 的转变，重点是响应式原理的变化。Vue2 使用 Object.defineProperty() 追踪数据变化，而 Vue3 则采用 Proxy 创建响应式对象。作者总结了 Vue3 的响应式 API，包括 reactive 和 ref 的使用及其局限性。
🎯
关键要点
- Vue2 使用 Object.defineProperty() 方法追踪数据变化，而 Vue3 则使用 Proxy 创建响应式对象。
- Proxy 对象用于创建一个对象的代理，实现基本操作的拦截和自定义。
- Vue3 的核心响应式 API 包括 reactive 和 ref，reactive 使用 Proxy，而 ref 通过 value 包裹对象。
- reactive() API 有局限性，只能用于对象类型，不能替换整个对象，对解构操作不友好。
- 建议使用 ref() 作为声明响应式状态的主要 API，特别是在使用 TypeScript 时需要注意访问内部值的 value 属性。
❓
延伸问答
Vue2 和 Vue3 在响应式原理上有什么主要区别？
Vue2 使用 Object.defineProperty() 方法追踪数据变化，而 Vue3 则采用 Proxy 创建响应式对象。
什么是 Proxy，它在 Vue3 中的作用是什么？
Proxy 是用于创建对象代理的工具，可以拦截和自定义基本操作，在 Vue3 中用于创建响应式对象。
Vue3 的核心响应式 API 包括哪些？
Vue3 的核心响应式 API 包括 reactive 和 ref，reactive 使用 Proxy，而 ref 通过 value 包裹对象。
reactive() API 有哪些局限性？
reactive() API 只能用于对象类型，不能替换整个对象，对解构操作不友好。
在 Vue3 中，如何使用 ref() 声明响应式状态？
使用 ref() 声明响应式状态时，需要注意访问或赋值其内部值时使用 value 属性。
为什么建议在 Vue3 中使用 ref() 而不是 reactive()？
建议使用 ref() 作为主要 API，因为它在处理原始类型时更灵活，并且避免了 reactive() 的局限性。
➡️
