vue3中ref与reactive的区别
|
2025年1月24日 20:41
本文热度 415
|
在 vue3 中的组合式 api 中，针对响应式有了一些改变，其中响应式 api 中，两个比较重要的是 ref 和 reactive，但是对于这两个区别以及使用场景，大多数初学者都比较迷惑，本文会详细讲述这两个区别以及使用场景。
1.什么是reactive？
reactive用于创建一个响应式的对象。它会递归地将对象的所有属性转换为响应式的。这意味着如果对象内部还有嵌套的对象或数组，它们也会变成响应式的。
const state = reactive({ count: 0, message: 'Hello' })
number、string、boolean等）和对象。当ref包装的值被修改时，Vue 会自动更新与之绑定的 DOM。
ref
：可以包装基本数据类型和对象。当访问ref包装的值时，需要通过.value属性来获取实际的值。例如reactive
：主要用于对象类型，对于基本数据类型，虽然也可以使用reactive（如reactive({ value: 1})），但不如ref方便。并且reactive对象的属性可以直接访问，不需要额外的语法，如
响应式转换方式
ref
：是通过Object.defineProperty()（在 Vue 3 中实际的实现更复杂，但基本原理类似）为.value属性添加了get和set访问器来实现响应式。reactive
：是基于Proxy对象来实现响应式的。它可以拦截对象的各种操作（如属性读取、设置、删除等），从而实现响应式更新。这使得reactive在处理复杂的嵌套对象时更加高效和灵活。
在模板中的使用
ref
：在模板中，ref包装的值会自动解包。例如，如果count是一个ref，在模板中可以直接使用{{ count }}，而不需要写成{{ count.value }}。reactive
：在模板中可以直接访问reactive对象的属性，如{{ state.count }}。
4. 何时使用 Reactive，何时使用 Ref？
使用 Reactive：
当你需要创建一个包含多个属性的状态对象时，例如在状态机、表单数据等场景中，使用 reactive 更为合适。
如果你的数据结构是复杂的，使用 reactive 可以使代码更简洁明了。
使用 Ref：
如果你要管理简单的数据类型（如数字、字符串等），则使用 ref 更为简便和高效。
当你需要单独处理某个变量，或将其作为 props 传递时，使用 ref 更加直观。
5.使用场景
ref的使用场景
当需要存储一个简单的基本数据类型的响应式数据时，如一个计数器的值、一个输入框的文本长度等，ref是很好的选择。例如，在一个组件中跟踪用户点击按钮的次数：
<template> <button @click="increment">Click me</button> <p>You clicked {{ count }} times.</p></template><script>import { ref } from 'vue';export default { setup() { const count = ref(0); const increment = () => { count.value++; }; return { count, increment }; }};</script>
reactive的使用场景
当需要管理一个复杂的状态对象，特别是包含多个相关属性的对象时，reactive更合适。例如，管理一个表单的状态，包括多个输入框的值、表单的提交状态等：<template> <form @submit.prevent="submitForm"> <input v-model="formData.name" type="text" placeholder="Name"> <input v-model="formData.email" type="email" placeholder="Email"> <button type="submit">Submit</button> </form> <p v-if="formData.submitted">Form submitted successfully!</p></template><script>import { reactive } from 'vue';export default { setup() { const formData = reactive({ name: '', email: '', submitted: false }); const submitForm = () => { formData.submitted = true; }; return { formData, submitForm }; }};</script>
组合使用
<template> <div> <p>{{ state.obj.count }}</p> <button @click="incrementCount">Increment</button> </div></template><script>import { ref, reactive } from 'vue';export default { setup() { const count = ref(0); const state = reactive({ obj: { count } }); const incrementCount = () => { count.value++; }; return { state, incrementCount }; }};</script>
总结
在 Vue 3 中，Reactive 和 Ref 是实现响应式编程的重要工具。通过理解这两者之间的区别以及适用场景，可以更有效地进行状态管理和应用开发。简单来说：
该文章在 2025/1/25 10:28:30 编辑过
400 186 1886
