vue3中的ref和reactive的區別
- 1、響應式數據
- 2、ref
- 3、reactive
- 4、ref VS reactive
- 5、往期回顧
- 總結：
1、響應式數據
處理響應式數據時到底是該用ref還是reactive...
響應式數據是指在 Vue.js 中，當數據發生變化時，相關的視圖會自動更新以反映這些變化的特性。Vue.js 的響應式系統通過數據綁定實現了數據和視圖之間的自動同步。具體來說，當你在 Vue 實例中聲明一個數據屬性時，Vue 將會將這些屬性轉換成響應式數據。這意味著當這些屬性的值發生變化時，相關的視圖會自動更新以反映這些變化。
舉例說明：
<template><div>數據a:{{ a }}</div><button @click="add">+1</button>
</template>
<script setup>
let a = 1;
const add = () => {a++;console.log(a);
};
</script>
<style lang="css" scoped></style>
數據a，點擊按鈕“+1”，數據a會增加1，并且會打印當前a的值，來看效果
點了n下+1，可是顯示的a的值并沒有改變，但是我們可以從打印的結果發現，我們的a實際上是改變了的。如果要讓我們的a變成一個響應式數據，也就是說a改變，展示在屏幕上的a也要變化，那么我們就要使用到 ref和reactive
2、ref
在 Vue 3 中，
ref是一個用于創建響應式引用的函數。它接受一個初始值作為參數，并返回一個包含響應式引用的對象。使用ref創建的值可以在模板中直接使用，并且當其值發生變化時，相關的 DOM 元素會自動更新。ref通常用于創建可變的響應式值，例如基本類型數據，對象或數組。ref如何發揮作用的;
舉例說明ref處理基本數據類型：
<template><div>數據a:{{ a }}</div><button @click="add">+1</button>
</template>
<script setup>
import { ref } from "vue";
let a = ref(1)
const add = () => {a.value++;console.log(a);
};
</script>
<style lang="css" scoped></style>
首先引入ref
在ref的括號中填入a的值
在修改a的值時，我們需要用.value來修改
來看看我們打印出來的a是什么
在使用ref以后，我們的a就變成了一個RefImpl的實例對象，我們可以看到a的值儲存在里面的.value屬性,于是通過.value我們就可以訪問到值，來看看效果：
這樣我們a的值就是一個響應式數據了
ref處理對象類型
同樣的，有一名叫大C的員工，點擊按鈕就可以給他漲工資
<template>員工信息<div>姓名:{{person.name}}</div><div>年齡:{{person.age}}</div><div>工資:{{person.salary}}</div><button @click="addSalary">漲工資</button>
</template><script setup>
import {ref} from 'vue'
let person = ref({name:'張三',age:18,salary:10000
})
const addSalary = ()=>{person.value.salary += 1000console.log(person.value);
}
</script>
<style lang="css" scoped>
</style>
看的出來，這也是一個響應式的數據，我們在處理基本數據類型修改的時候，我們都是用.value來獲取數據的，那么這里在修改salary的值的時候不應該是 person.value.salary.value嗎？我們來看person.value的打印結果…
我們可以看到，person.value是一個Proxy的實例對象，對象上有了我們的age等屬性，所以不需要再接上.value了
3、reactive
在 Vue 3 中，
reactive是一個函數，用于將普通 JavaScript 對象轉換為響應式對象。響應式對象的屬性在被訪問和修改時會自動觸發視圖的更新，reactive可以用于創建包含復雜數據結構的響應式對象，如嵌套對象和數組。
reactive是不能用來處理基本數據類型的，reactive處理基本數據類型來看例子:
<template><div>a:{{a}}</div></template><script setup>import {reactive} from 'vue'const a = reactive(1)</script>
這時我們雖然能夠看到a顯示，但是會報警告：
reactive處理對象數據類型
<template>員工信息<div>姓名:{{person.name}}</div><div>年齡:{{person.age}}</div><div>工資:{{person.salary}}</div><button @click="addSalary">漲工資</button></template><script setup>import {reactive} from 'vue'let person = reactive({name:'張三',age:18,salary:10000})const addSalary = ()=>{person.salary += 1000console.log(person);}</script><style lang="css" scoped></style>先來看看person是什么…
person是Proxy的一個實例對象，到這里你就應該明白怎么訪問他的值了…
并且，在上面ref處理對象類型的時候，.value也是一個Proxy的實例對象，到這里，突然意識到原來ref處理對象數據類型的時候會偷偷求助reactive…
4、ref VS reactive
1、返回值類型：
ref返回一個包含響應式基本數據類型值的對象。reactive返回一個包含響應式對象的 Proxy 對象。
包裝的數據類型：ref可以包裝基本數據類型（如數字、字符串、布爾值等）和引用類型（如對象、數組等）。reactive只能包裝引用類型數據（對象、數組等）。
訪問數據：- 通過
ref創建的響應式對象，需要通過 .value 訪問或修改其值。 - 通過
reactive創建的響應式對象，可以直接訪問和修改其屬性。
應用場景： ref適用于包裝單個基本數據類型或對象。reactive適用于包裝包含多個屬性或復雜數據結構的對象。
其實不管是用ref還是 reactive，就像是在情人節選擇禮物一樣，有時候你需要一束精致的玫瑰（ref），有時候你更想要一份充滿驚喜的禮物（reactive）。無論你選擇哪個，都是為了讓代碼更加美好，讓開發更加愉快！
5、往期回顧
vue3 + TS + vite 搭建中后臺管理系統（完整項目）
總結：
前端路上 | 所知甚少，唯善學。
各位小伙伴有什么疑問，歡迎留言探討。
— 關注我：前端路上不迷路 —
