淺談vue3中ref、toRef、toRefs?和?reactive的區(qū)別
更新時間：2022年07月06日 15:22:39 作者：weixin79893765432...
本文主要介紹了淺談vue3中ref、toRef、toRefs?和?reactive的區(qū)別，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
一、ref——定義任意類型響應式數據
- ref 能定義“任何類型”的響應式數據（ref 在 vue3 中指響應式數據）。
- 參數可以傳入任意數據類型。
- 使用 ref 定義的屬性必須通過 .value 的形式才能修改其值。屬性的值一旦被修改就會觸發(fā)模板的重新渲染以顯示最新的值。
- 對于在 setup 返回的 refs（return 出的對象里的屬性），因為在模板中訪問它們時，它們會被自動淺解包，所以在 template 中使用時無需加 .value。
1、對于在 setup 中手動返回的響應式數據，在 template 中使用時無需加 .value
例如：
<template>
? <div>{{ count }}</div>
</template>
<script>
? import { ref } from 'vue'
? export default {
? ? setup(props) {
? ? ? const count = ref(0)
? ? ? // 暴露給 template 的屬性，可以直接在 template 中使用
? ? ? return {
? ? ? ? count
? ? ? }
? ? }
? }
</script>2、ref 能定義“任何類型”的響應式數據
如果將 setup 寫在 <script> 標簽里，則該標簽里的腳本都是執(zhí)行在 setup 里的，并且里面聲明數據均會默認地暴露給 template，在 template 中使用時無需加 .value。
例如：
<template>
? <div>{{ name }} : {{ state.age }}</div>
</template>
<script setup>
? import { ref } from 'vue'
? // 為基本數據類型添加響應式狀態(tài)
? const name = ref('Marry')
? // 為復雜數據類型添加響應式狀態(tài)
? const state = ref({
? ? age: 18
? })
? // 打印name的值
? console.log(name.value)
? // 打印count的值
? console.log(state.value.age)
</script>二、reactive——定義響應式對象
- 用來定義“對象類型”的響應式數據。
- 參數只能傳入對象類型，返回一個具有響應式狀態(tài)的副本。
- 使用 reactive 定義的屬性可以直接使用，不需要加 .value。
- 不要直接解構使用 reactive 定義的響應式對象，否則會造成該對象脫離 ref 響應式。需要用 toRefs 將其轉化為響應式數據對象，然后再解構返回。
例如：
<template>
? <div>{{ obj.count }}</div>
</template>
<script setup>
? import { reactive } from 'vue'
??
? const obj = reactive({
? ? count: 0
? })
? // 使用 reactive 定義的屬性可以直接使用，不需要加 .value
? console.log(state.count)
</script>三、toRef——將一個 reactive 轉化為一個 ref
- 針對一個響應式對象（reactive 封裝）的 prop（屬性）創(chuàng)建一個 ref，且保持響應式兩者 保持引用關系。
- 接收兩個參數：源響應式對象 和 屬性名，返回一個 ref 數據。
- 獲取數據值的時候需要加 .value。
- 使用 toRef 轉化后生成的 ref 數據如果是引用類型數據時，那么它不是原始數據的拷貝，而是原始數據的引用，改變它的數據也會同時改變原始數據。
例如：在 setup 中使用父組件傳遞的 props 數據時，要引用 props 的某個屬性，且要保持響應式連接，就必須使用 toRef。
<template>
? <div>{{ myTitle }}</div>
</template>
<script>
? import { defineComponent, toRef } from 'vue'
? export default defineComponent({
? ? props: [title],
? ? setup (props) {
? ? ? // 創(chuàng)建變量myTitle
? ? ? const myTitle = toRef(props, 'title')
? ? ? console.log(myTitle.value)
? ? ? return {
?? ??? ?myTitle
? ? ? }
? ? }
? })
</script>四、toRefs——將多個 reactive 自動解構為多個 ref
- toRefs 用于將響應式對象轉換為普通對象，其中普通對象的每個屬性都是指向原始對象相應屬性的 ref，兩者保持引用關系。
- toRefs 常用于 ES6 的解構賦值操作。但是，對一個響應式對象直接解構時，解構后的數據將不再有響應式，而使用 toRefs 可以方便解決這個問題。
- 獲取數據值的時候需要加 .value。
- 使用 toRefs 轉化后生成的 ref 數據如果是引用類型數據時，那么它不是原始數據的拷貝，而是原始數據的引用，改變它的數據也會同時改變原始數據。
- 其作用和 toRef 類似，只不過 toRef 是對一個個屬性手動賦值，而 toRefs 是自動解構賦值。
<template>
? <div>{{ myTitle }}</div>
</template>
<script>
? import { defineComponent, toRefs } from 'vue'
? export default defineComponent({
? ? props: [title],
? ? setup (props) {
? ? ? // toRefs 默認使用了解構賦值，創(chuàng)建了變量 myTitle
? ? ? const { myTitle } = toRefs(props)
? ? ? console.log(myTitle.value)
? ? ? return {
?? ??? ?myTitle
?? ? ?}
? ? }
? })
</script>到此這篇關于淺談vue3中ref、toRef、toRefs 和 reactive的區(qū)別的文章就介紹到這了,更多相關vue3 ref toRef toRefs reactive內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
下面小編就為大家分享一篇vue監(jiān)聽滾動事件 實現某元素吸頂或者固定位置顯示方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了Vue事件總線的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
今天小編就為大家分享一篇在axios中使用params傳參的時候傳入數組的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
對于一個中后臺類的項目,一個比較常見的展示形式就是Table了,這篇文章主要給大家介紹了關于Vue封裝通用table組件的相關資料,需要的朋友可以參考下2021-07-07
這篇文章主要介紹了VUE+Element實現增刪改查的示例源碼，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-11-11
GMT（Greenwich Mean Time）和UTC（Coordinated Universal Time）是兩個時間標準,它們在許多方面非常相似,但也有一些微小的差異,本文給大家詳細介紹了Vue使用moment將GMT時間轉換為北京時間,需要的朋友可以參考下2023-12-12
今天我們來學習一下watch偵聽器的好兄弟?watchEffect?偵聽器。這個相對來說比較簡單，用的不是很多，當然了，根據自己的項目情況自行決定使用，希望對大家有所幫助2022-07-07
這篇文章主要介紹了vue點擊導航頁面實現自動滾動到特定位置方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue插件v-touch的坑及解決(不能上下滑動)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
ant?菜單組件報錯Cannot?read?property?‘isRootMenu‘?of?undefin
這篇文章主要介紹了ant?菜單組件報錯Cannot?read?property?‘isRootMenu‘?of?undefined解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08