在 vue3 中的組合式 api 中，針對響應(yīng)式有了一些改變，其中響應(yīng)式 api 中，兩個比較重要的是 ref 和 reactive，但是對于這兩個區(qū)別以及使用場景，大多數(shù)初學(xué)者都比較迷惑，本文會詳細講述這兩個區(qū)別以及使用場景。
1.什么是reactive？
reactive用于創(chuàng)建一個響應(yīng)式的對象。它會遞歸地將對象的所有屬性轉(zhuǎn)換為響應(yīng)式的。這意味著如果對象內(nèi)部還有嵌套的對象或數(shù)組，它們也會變成響應(yīng)式的。
例如，創(chuàng)建一個reactive對象
const state = reactive({ count: 0, message: 'Hello' })
number、string、boolean等）和對象。當ref包裝的值被修改時，Vue 會自動更新與之綁定的 DOM。例如，創(chuàng)建一個ref來存儲一個數(shù)字
3.ref 和reactive 之間的區(qū)別？ref
：可以包裝基本數(shù)據(jù)類型和對象。當訪問ref包裝的值時，需要通過.value屬性來獲取實際的值。例如reactive
：主要用于對象類型，對于基本數(shù)據(jù)類型，雖然也可以使用reactive（如reactive({ value: 1})），但不如ref方便。并且reactive對象的屬性可以直接訪問，不需要額外的語法，如
?響應(yīng)式轉(zhuǎn)換方式
ref
：是通過Object.defineProperty()（在 Vue 3 中實際的實現(xiàn)更復(fù)雜，但基本原理類似）為.value屬性添加了get和set訪問器來實現(xiàn)響應(yīng)式。reactive
：是基于Proxy對象來實現(xiàn)響應(yīng)式的。它可以攔截對象的各種操作（如屬性讀取、設(shè)置、刪除等），從而實現(xiàn)響應(yīng)式更新。這使得reactive在處理復(fù)雜的嵌套對象時更加高效和靈活。
在模板中的使用
ref
：在模板中，ref包裝的值會自動解包。例如，如果count是一個ref，在模板中可以直接使用{{ count }}，而不需要寫成{{ count.value }}。reactive
：在模板中可以直接訪問reactive對象的屬性，如{{ state.count }}。
4. 何時使用 Reactive，何時使用 Ref？
使用 Reactive：
當你需要創(chuàng)建一個包含多個屬性的狀態(tài)對象時，例如在狀態(tài)機、表單數(shù)據(jù)等場景中，使用 reactive 更為合適。
如果你的數(shù)據(jù)結(jié)構(gòu)是復(fù)雜的，使用 reactive 可以使代碼更簡潔明了。
使用 Ref：
如果你要管理簡單的數(shù)據(jù)類型（如數(shù)字、字符串等），則使用 ref 更為簡便和高效。
當你需要單獨處理某個變量，或?qū)⑵渥鳛?props 傳遞時，使用 ref 更加直觀。
5.使用場景
ref的使用場景
當需要存儲一個簡單的基本數(shù)據(jù)類型的響應(yīng)式數(shù)據(jù)時，如一個計數(shù)器的值、一個輸入框的文本長度等，ref是很好的選擇。例如，在一個組件中跟蹤用戶點擊按鈕的次數(shù)：
<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的使用場景
當需要管理一個復(fù)雜的狀態(tài)對象，特別是包含多個相關(guān)屬性的對象時，reactive更合適。例如，管理一個表單的狀態(tài)，包括多個輸入框的值、表單的提交狀態(tài)等：<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>
總結(jié)
在 Vue 3 中，Reactive 和 Ref 是實現(xiàn)響應(yīng)式編程的重要工具。通過理解這兩者之間的區(qū)別以及適用場景，可以更有效地進行狀態(tài)管理和應(yīng)用開發(fā)。簡單來說：
使用 Reactive
處理復(fù)雜的對象結(jié)構(gòu)及其屬性。使用 Ref
管理簡單基本數(shù)據(jù)類型或單獨數(shù)據(jù)。
該文章在 2025/1/25 10:28:30 編輯過
400 186 1886
