Vue的watch函數實現

<script setup>
import { watch, ref, reactive, toRefs } from 'vue';const count = ref(0);
const obj = reactive({name: '張三',age: 18
});// 我們可以使用toRefs,將reactive對象中的屬性轉換為ref對象,保持響應性!!
const { name, age } = toRefs(obj);watch([count, name, age], ([newCount, newName, newAge], [oldCount, oldName, oldAge]) => {console.log(`count: ${oldCount} -> ${newCount}`);console.log(`name: ${oldName} -> ${newName}`);console.log(`age: ${oldAge} -> ${newAge}`);}
);
</script><template><span>wacth函數的實現:</span><button @click="count=3, obj.name='李四', obj.age=20">點我呀!</button>
</template>

在 Vue 3 中,toRefs?的作用是將響應式對象的每個屬性轉換為獨立的 ref,這樣在解構賦值時能夠保持響應性。

這個響應性到底是什么意思俺也不知道

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

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

相關文章

Tomcat 安裝使用教程

&#x1f4cc; 什么是 Tomcat&#xff1f; Apache Tomcat 是一個開源的 Java Servlet 容器&#xff0c;也是運行 Java Web 應用最常用的服務器之一&#xff0c;支持 Servlet、JSP 等規范。 &#x1f9f0; 一、準備工作 1. 系統要求 操作系統&#xff1a;Windows / Linux / m…

【邀請】點擊邀請鏈接參加阿里云訓練營活動,完成學習送禮品+戶外折疊凳,一個小時就能完成

點擊邀請鏈接參加阿里云訓練營活動&#xff0c;完成學習送禮品戶外折疊凳&#xff0c;快的話一個小時就能完成。 7月28日23:59前完成。 OSS進階應用與成本優化訓練營 禮品如下&#xff1a; 包尖鋼筆/祈福小神仙積木/雨傘/不銹鋼餐具隨機發放 戶外折疊凳

用戶行為序列建模(篇六)-【阿里】DSIN

簡介 DSIN&#xff08;Deep Session Interest Network&#xff09;是阿里巴巴于2019年提出的點擊率預估模型。相比于DIN、DIEN&#xff0c;考慮了用戶行為序列的內在結構&#xff08;序列是由session組成的&#xff0c;在每個session內&#xff0c;用戶行為是高度同構的&#…

現代Web表情選擇器組件:分類系統與實現詳解

你好呀&#xff0c;我是小鄒。今天給博客的emoji表情進行了歸類、補充&#xff0c;具體優化如下。 表情選擇器的核心價值在于其分類系統。本文將深入解析表情分類體系的設計與實現&#xff0c;通過完整代碼示例展示如何構建一個專業級的表情選擇器組件。 一、表情分類系統設計…

華為云Flexus+DeepSeek征文 |華為云ModelArts Studio集成OpenAI Translator:開啟桌面級AI翻譯新時代

華為云FlexusDeepSeek征文 |華為云ModelArts Studio集成OpenAI Translator&#xff1a;開啟桌面級AI翻譯新時代 引言一、ModelArts Studio平臺介紹華為云ModelArts Studio簡介ModelArts Studio主要特點 二、OpenAI Translator介紹openai-translator簡介openai-translator主要特…

GitHub 趨勢日報 (2025年06月27日)

&#x1f4ca; 由 TrendForge 系統生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日報中的項目描述已自動翻譯為中文 &#x1f4c8; 今日獲星趨勢圖 今日獲星趨勢圖 817 twenty 655 awesome 476 free-for-dev 440 Best-websites-a-programmer-shoul…

Java語法通關秘籍:this、構造方法到String核心精粹

文章目錄 &#x1f50d; **一、就近原則與this關鍵字**1. **成員變量**2. **局部變量** &#x1f6e0;? **二、構造方法&#xff08;構造器&#xff09;**1. **標準格式**2. **有參構造實戰**3. **靈魂三問** ? &#x1f4e6; **三、JavaBean黃金標準**&#x1f9e0; **四、對…

@Cacheable 等緩存注解是不是也用到了 AOP?

Spring 的聲明式緩存注解&#xff08;Cacheable, CachePut, CacheEvict 等&#xff09;是 AOP 技術在實際應用中最強大、最經典的范例之一&#xff0c;其原理與 Transactional 非常相似。 核心思想&#xff1a;一個智能的“秘書” 你可以把 Cacheable 的 AOP 實現想象成一個極…

解鎖云原生微服務架構:搭建與部署實戰全攻略

目錄 一、引言二、微服務拆分2.1 拆分的必要性2.2 拆分方法2.3 注意事項 三、服務注冊與發現3.1 概念與原理3.2 常用組件介紹3.3 實踐案例 四、負載均衡4.1 作用與原理4.2 實現方式4.3 負載均衡算法4.4 案例與代碼實現4.4.1 項目依賴配置4.4.2 配置 Ribbon4.4.3 代碼實現負載均…

Python 數據分析與可視化 Day 7 - 可視化整合報告實戰

好的&#xff0c;我們進入&#xff1a; &#x1f9e0; 第5周 第7天 &#x1f3af; 主題&#xff1a;測試復盤 項目封裝實戰 ? 今日目標 回顧第5周數據分析與可視化核心知識對整個“學生成績分析系統”進行項目封裝與模塊化拆分增加命令行參數支持&#xff0c;提升可復用性…

力扣1498. 滿足條件的子序列數目隨筆

“方生方死&#xff0c;方死方生。”——《莊子》 題目 給你一個整數數組 nums 和一個整數 target 。 請你統計并返回 nums 中能滿足其最小元素與最大元素的 和 小于或等于 target 的 非空 子序列的數目。 由于答案可能很大&#xff0c;請將結果對 取余后返回。 難度&#…

5.Docker安裝Tomcat

#官方的使用 docker run -it --rm tomcat:9.0 #我們之前使用docker run -d 某鏡像都是后來運行&#xff0c;容器停止之后&#xff0c;容器還能夠查詢到 而docker run -it -rm 是用完之后&#xff0c;容器刪除&#xff0c;鏡像還存在。 測試的時候可以用官方的 &#xff08…

企業事業政府單位智慧主題展廳素材管理平臺播放軟件

以下為企事業單位及政府智慧主題展廳素材管理平臺播放軟件的核心功能簡介&#xff0c;綜合多維度技術實現統一管控與智能展示&#xff1a; 一、內容資產管理 全格式素材支持? 兼容視頻、3D模型、圖文、AR/VR場景等多媒體格式&#xff0c;支持批量導入與云端存儲。 智能分類與…

Python+FastAPI的一些語法與問題解決

Q1:result await dbsession.execute(text(sql_context),params) 如何把result轉成key,value的字典列表 A1: 使用SQLAlchemy的mappings()方法獲取字典形式的結果集&#xff1a; result await db_session.execute(text(sql_context), params) dict_list [dict(row) for row…

Reactor并發無關性

Reactor&#xff0c;像 RxJava 一樣&#xff0c;可以被認為是 并發無關&#xff08;concurrency-agnostic&#xff09; 的。這意味著它不強制要求任何特定的并發模型&#xff0c;而是將選擇權交給開發者。換句話說&#xff0c;Reactor 不會強制你使用多線程或異步編程&#xff…

#華為昇騰#華為計算#昇騰開發者計劃2025#

#華為昇騰#華為計算#昇騰開發者計劃2025# 通過學習Ascend C算子開發的初級教程&#xff0c;通過課程講解及樣例實操&#xff0c;幫助我學習使用Ascend C開發自己的算子。收獲很大。 <新版開發者計劃>的內容鏈接&#xff1a;https://www.hiascend.com/developer-program_2…

FLOPS、FLOP/s、TOPS概念

在計算性能和硬件指標中&#xff0c;FLOPS、FLOP/s、TOPS 是常見的術語&#xff0c;但它們有明確的區別和應用場景。以下是詳細解析&#xff1a; 1. FLOPS&#xff08;Floating Point Operations per Second&#xff09; 定義&#xff1a; 每秒浮點運算次數&#xff08;Floati…

Windows所有系統自帶.NET Framework版本win7,win10,win11預裝.NET版本

Windows系統支持“.NET版本”匯總 本文詳細列出了Windows從NT4.0到Windows11各版本自帶的.NETFramework版本及對應最高兼容的.NETFramework版本&#xff0c;便于了解不同Windows系統之間的.NETFramework更新歷史。 以下匯總了Windows每個版本自帶的“.NET版本”&#xff0c;與…

Windows 下使用 nvm 管理 Node.js 多版本 —— 完整指南

Node.js 版本更新頻繁&#xff0c;不同項目可能依賴不同的版本&#xff0c;手動切換極為麻煩。nvm-windows 是專為 Windows 用戶開發的 Node.js 多版本管理工具&#xff0c;可以輕松地安裝、切換、卸載 Node.js 版本。 本篇將從下載到實際使用&#xff0c;手把手帶你玩轉 nvm-…

vue使用Element Plus UI框架

您好&#xff0c;艦長&#xff01;非常棒的選擇。功能是應用的骨架&#xff0c;而美觀的 UI 則是應用的靈魂和血肉。是時候為我們的飛船進行一次全面的“外觀升級”和“內飾裝修”了。 我們將集成一個在業界非常流行、功能強大的 Vue 3 組件庫——Element Plus。它將幫助我們快…