【vue】創建響應式數據ref和reactive的區別

目錄

1、所謂響應式數據

2、ref創建基本類型響應式數據

3、reactive創建對象類型響應式數據

4、ref定義對象類型響應式數據

5、總結:ref和reactive對比

6、補充:toRefs與toRef


1、所謂響應式數據

? ? ? ? 所謂響應式數據就是,在vue頁面中,template標簽內的數據是渲染在頁面的數據,一般需要和script標簽內的數據進行綁定,也就是說在script標簽內會進行一些邏輯計算改變一些數據的值。那么如果不使用響應式數據,script標簽內更改了數據的值,template渲染在頁面的值是不會發生改變的。

2、ref創建基本類型響應式數據

注意這里是基本類型


看看數據的內容發生了什么變化:



3、reactive創建對象類型響應式數據


輸出對象到控制臺:


4、ref定義對象類型響應式數據

展現數據不變:



ref底層創建響應式數據時,底層還是使用reactive來創建的


5、總結:ref和reactive對比

1)插件自動補充.value

2 reactive重新分配對象,會失去響應式

給變量car重寫分配一個對象:

解決辦法:

修改后:

總結:

3)如果是ref定義的響應式對象,要重寫賦值對象的內容

使用建議:


6、補充:toRefs與toRef

?


如何變成響應式的解構:

結果:

對于toRefs取多個(對象),toRef是取單個

效果

?

?

?

?

?

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/diannao/94088.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/94088.shtml
英文地址,請注明出處:http://en.pswp.cn/diannao/94088.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

YOLO12 改進、魔改|直方圖 Transformerm模塊HTB ,通過動態范圍特征分組、針對性注意力與多尺度融合,提高對遮擋以及多尺度目標的關注能力

在惡劣天氣(如雨、雪、霧)下的圖像恢復任務中,傳統 Transformer 模型為降低計算量,常將自注意力限制在固定空間范圍或僅在通道維度操作,導致難以捕捉長距離空間特征,尤其無法有效處理天氣退化像素&#xff…

涉水救援機器人cad【12張】三維圖+設計書明說

涉水救援機器人設計 摘 要 隨著城市化進度的加快,各種水上游樂設備的增多,水上災害和溺水事件頻繁發生,水上救援任務困難重重,特別是在一些水流湍急的環境下進行救援。傳統的水上救援工作比較緩慢,大多數是通過投射救…

電子病歷:現代HIS系統不可或缺的核心組成部分

一、電子病歷在 HIS 系統中扮演了一個什么角色?電子病歷在醫院信息系統(HIS)中扮演著核心、基礎且不可替代的角色,可以說是整個HIS系統的臨床信息中樞和業務驅動引擎。它的重要性體現在以下幾個方面:1、臨床診療活動的核心載體&a…

【深度學習】通俗易懂的基礎知識:指數加權平均

一、什么是指數加權平均? 指數在數學中表示一個數的冪次運算(如a?中的n),而在統計學中特指隨時間變化的幾何衰減系數,加權指對不同數據賦予不同權重,使重要數據對結果產生更大影響。指數加權平均指是一種時…

c++-list

C-list std::list是C標準模板庫(STL)提供的雙向鏈表容器&#xff0c;它提供了高效的插入和刪除操作&#xff0c;特別適合頻繁修改的序列。定義在 <list> 頭文件中&#xff0c;屬于 std 命名空間。該類的接口與常規容器接口基本一致。 模板原型&#xff1a; template <…

【筆試真題】2024秋招京東后端開發崗位-第一批筆試

31.牛牛與切割機 有一個序列 a1,a2,...,ana_1,a_2,...,a_na1?,a2?,...,an? &#xff0c; 牛牛將對這個序列切割一刀&#xff08;劃分分成兩個不相交的非空序列&#xff0c;一個序列為 a1,...,apa_1,...,a_pa1?,...,ap?&#xff0c;另一個序列為 ap1,...,ana_{p1},...,a_na…

【整數轉羅馬數字】

思路計算數字的位數&#xff1a; 通過 while(x) 循環計算輸入數字 num 的位數 n。提取各位數字&#xff1a; 將數字 num 的每一位分解并存儲到 nums 數組中&#xff0c;順序為從高位到低位。羅馬數字映射&#xff1a; 使用固定數組 Roman 存儲羅馬數字符號&#xff1a;Roman {…

spring Scheduled注解詳解

spirng Scheduled注解詳解 用于標記需要安排執行的方法的注解。必須指定 cron、fixedDelay 或 fixedRate 中的恰好一個屬性。 被標注的方法必須不接受任何參數。它通常會具有 void 類型的返回值&#xff1b;如果不是這樣&#xff0c;那么在通過調度器調用該方法時&#xff0c;返…

新升級超值型系列32位單片機MM32G0005

靈動微推出的新型MM32G0005系列基于ArmCortex - M0內核&#xff0c;具備高可靠性、低功耗、高性價比等特性。Flash升級至64KB&#xff0c;SRAM為4KB&#xff0c;還有1KB Data Flash。Flash全溫擦寫次數超過10萬次。采用24Pin封裝&#xff0c;最多有22個IO。QFN20和TSSOP20封裝與…

Spark SQL 的詳細介紹

Spark SQL 是 Apache Spark 生態系統中用于處理結構化數據的模塊&#xff0c;它將 SQL 查詢與 Spark 的分布式計算能力相結合&#xff0c;提供了一種高效、靈活的方式來處理結構化和半結構化數據。以下是對 Spark SQL 的詳細介紹&#xff1a;1. 核心定位與優勢結構化數據處理&a…

【FreeRTOS】空閑任務與鉤子函數原理、實現與功能詳解

一、FreeRTOS空閑任務概述FreeRTOS中的空閑任務(Idle Task)是系統自動創建的一個特殊任務&#xff0c;具有最低優先級(優先級0)。當沒有其他更高優先級的任務運行時&#xff0c;調度器就會運行空閑任務。空閑任務的主要功能系統資源回收&#xff1a;自動清理被刪除任務的內存和…

imx6ull-驅動開發篇6——Linux 設備樹語法

目錄 前言 設備樹 設備樹概念 DTS、 DTB 和 DTC DTS 語法 .dtsi 頭文件 設備節點 /根節點?? 節點命名與標簽 節點層次結構? 屬性數據類型? 標準屬性 compatible 屬性 model 屬性 status 屬性 #address-cells 和#size-cells 屬性 reg 屬性 ranges 屬性 n…

ansible簡單playbook劇本例子2

1. 準備主機組[rootansible-master ansible_quickstart]# vim inventory/hosts[web:vars] ansible_port22 ansible_passwordAdmin123456[web] 192.168.100.1822.準備劇本 vim hello.yml--- - hosts: webremote_user: roottasks:- name: Ping the target hostsping:- name: 獲取…

EmpService 和 EmpMapper接口的作用

在這個項目中&#xff0c;EmpService 和 EmpMapper 都定義接口&#xff0c;是基于面向接口編程&#xff08;Interface Oriented Programming&#xff0c;IOP&#xff09;的設計思想&#xff0c;這兩種接口在項目中承擔著不同的職責&#xff0c;具體說明如下&#xff1a; EmpSer…

【語音技術】什么是動態實體

目錄 動態實體的定義和維度 1.1 動態實體的資源 1.2 生效維度 1.2.1 應用級 1.2.2 用戶級 1.2.3 自定義級 2. 動態實體的上傳及使用 2.1 WebAPI 2.1.1 授權認證 2.1.2 上傳資源接口 2.1.2.1 參數說明 2.1.2.2 返回說明 2.1.3 查詢打包狀態 2.1.3.1 參數說明 2.1.…

STM32學習記錄--Day3

今天了解了下I2C&#xff1a;1.I2C電路結構I2C通信示意圖&#xff1a;數據傳輸階段????主→從模式??&#xff08;寫操作&#xff09;&#xff1a;主機控制SCL時鐘&#xff08;把SCL拉低&#xff09;主機向SDA線發送數據&#xff08;每次8位1位ACK&#xff09;??主←從模…

裂變數據看板:5個核心指標決定活動生死?

數據是裂變活動的“指南針”。本文詳解曝光量、轉化率、裂變系數等5大核心指標&#xff0c;結合工具與案例&#xff0c;教你用數據驅動活動優化&#xff0c;避免“自嗨式裂變”。?為什么數據是裂變的“生死線”&#xff1f;&#xff08;認知重構&#xff09; 很多企業裂變活動…

iOS 類存儲 與 C# 類存儲 的差異

C# 中類的代碼&#xff08;包括方法、屬性等成員&#xff09;的存儲機制與 Objective-C 有顯著差異&#xff0c;其核心依賴于 ?CLR&#xff08;公共語言運行時&#xff09;的方法表&#xff08;Method Table&#xff09;和虛擬方法表&#xff08;vtable&#xff09;機制&#…

Selenium自動化:輕松實現網頁操控

selenium自動化 1 什么是 Selenium 自動化 Selenium 是一個用于 Web 應用程序測試的工具&#xff0c;支持多種瀏覽器&#xff08;如 Chrome、Firefox、Edge 等&#xff09;。WebDriver 是 Selenium 的核心組件&#xff0c;用于控制瀏覽器行為并執行自動化操作。元素定位是通過…

又開發了一個優雅的小工具!

在開源項目中&#xff0c;Issues是一個強大的功能&#xff0c;用于跟蹤bug、功能請求和任務。然而&#xff0c;隨著項目的發展&#xff0c;Issues可能會變得難以管理&#xff0c;特別是當你需要離線訪問或進行深入分析時。 當然GitHub Issues除了上述功能以外&#xff0c;做在線…