為什么Vue的watch函數無法檢測到父組件的參數變化?

在 Vue 中,watch?函數用于觀察和響應 Vue 實例上的數據變動。然而,如果你在父組件中直接修改了數組或對象的內容(例如,通過索引直接設置一個項的值,或者使用?Array.prototype.push?修改數組),Vue 可能無法檢測到這些變動。

這是因為 Vue 不能檢測到以下數組變動:

  1. 當你利用索引直接設置一個項時,例如:vm.items[indexOfItem] = newValue
  2. 當你修改數組的長度時,例如:vm.items.length = newLength

為了解決這個問題,你可以使用 Vue 提供的?set?方法,或者使用能夠觸發數組更新的方法,如?splice。如果你正在使用 Vue 3,你也可以使用?reactive?方法來創建響應式對象。

此外,你也可以嘗試使用?watchEffect?函數,它會立即執行傳入的函數,并響應式地追蹤其依賴,并在其依賴變化時重新運行。

在開發開發中我把數據使用reactive 聲明稱響應式,倒是在子組件watch還是監聽不到。就看了官網文檔,換成了watchEffect? 立即執行,watch是惰性的,由于我是Array類型,vue子組件watch檢測傳入值的變化。

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

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

相關文章

【ARM Cache 及 MMU 系列文章 6 -- Cache 寄存器 CTR_EL0 | CLIDR | CCSIDR | CSSELR 使用詳解 1】

請閱讀【ARM Cache 及 MMU/MPU 系列文章專欄導讀】 及【嵌入式開發學習必備專欄】 文章目錄 Cache 常用寄存器Cache CSSELR 寄存器Cache CSSELR 使用場景Cache CSSELR 操作示例 Cache CLIDR 寄存器LoUU 介紹LoUU 使用 LoUIS 介紹CLIDR 使用 Cache CCSIDR 寄存器Cache CTR_EL0 C…

移動端投屏到大屏幕的操作詳解

如果你懶得折騰電腦、電視或其他大屏設備上的影視軟件安裝及配置,可以選擇直接在手機端上將影片投屏到電腦、電視或其他大屏設備上,這里給大家分享三種手機投屏的方法。 系統自帶的投屏功能 不管是安卓、鴻蒙還是蘋果操作系統,都自帶了無線…

【RabbitMQ】exchange\channel\queue的聯系

Exchange、Channel和Queue在RabbitMQ中各自扮演不同的角色,它們之間的聯系構成了RabbitMQ消息傳遞的核心機制。以下是對它們之間聯系的詳細解釋: Exchange(交換機): 交換機是RabbitMQ中的消息路由器,它接收…

8.3 Go 包的組織結構

💝💝💝歡迎蒞臨我的博客,很高興能夠在這里和您見面!希望您在這里可以感受到一份輕松愉快的氛圍,不僅可以獲得有趣的內容和知識,也可以暢所欲言、分享您的想法和見解。 推薦:「stormsha的主頁」…

HTML靜態網頁成品作業(HTML+CSS)—— 家鄉南寧介紹網頁(2個頁面)

🎉不定期分享源碼,關注不丟失哦 文章目錄 一、作品介紹二、作品演示三、代碼目錄四、網站代碼HTML部分代碼 五、源碼獲取 一、作品介紹 🏷?本套采用HTMLCSS,未使用Javacsript代碼,共有2個頁面。 二、作品演示 三、代…

使用`dbus-monitor`命令深入了解DBus通信

使用dbus-monitor命令深入了解DBus通信 DBus是一種消息總線系統,它允許應用程序在運行時進行通信。在Linux系統中,DBus是一個重要的組成部分,特別是在桌面環境中,如GNOME或KDE。dbus-monitor是一個命令行工具,用于監視…

【Python】解決Python報錯:IndexError: list index out of range

???? 文章目錄 引言1. 錯誤詳解2. 常見的出錯場景2.1 循環中的索引錯誤2.2 錯誤的列表操作 3. 解決方案3.1 使用安全的訪問方法3.2 循環時使用正確的范圍 4. 預防措施4.1 編寫單元測試4.2 動態檢查列表長度 結語 引言 在Python中操作列表時,IndexError: list …

Web 版 | 開源數據庫設計軟件 | drawdb

文章目錄 簡介快速運行方式 1:本地運行方式 2:Docker 構建并運行方式 3:Docker 運行參考?? 目標: 安裝一個 Web 版本的 ER 圖設計軟件! ?? GitHub: https://github.com/drawdb-io/drawdb 【11.7k ?】 簡介 DrawDB:Free, simple, and intuitive database design …

算法學習筆記——二分搜索

二分搜索 在有序數組中確定num存在還是不存在&#xff1a; 當arr[m] num&#xff0c;則num存在當arr[m] > num&#xff0c;則 r m - 1&#xff0c;縮小r的范圍&#xff0c;繼續往左二分當arr[m] < num&#xff0c;則l m 1&#xff0c;縮小l的范圍&#xff0c;繼續往…

Android基礎-進程間通信

在Android系統中&#xff0c;跨進程通信&#xff08;IPC&#xff0c;Inter-Process Communication&#xff09;是實現不同應用程序或同一應用程序中不同進程間數據共享和交互的關鍵技術。Android提供了多種IPC機制&#xff0c;每種機制都有其特定的使用場景和優缺點。下面將詳細…

代碼隨想錄算法訓練營第36期DAY51

DAY51 121買賣股票的最佳時機 做過了。算是二刷&#xff1a;來自力扣優質題解 貪心&#xff1a; 每次記錄更新最小點和最大出售值。 class Solution {public: int maxProfit(vector<int>& prices) { int cur,resINT_MIN,curminINT_MAX; for(int…

從軍事角度理解“戰略與戰術”

戰略與戰術&#xff0c;均源于軍事術語。 戰略&#xff08;Strategy&#xff09;&#xff0c;源自希臘語詞匯“strategos&#xff08;將軍&#xff09;”和“strategia&#xff08;軍事指揮部&#xff0c;即將軍的辦公室和技能&#xff09;”。指的是指揮全局性作戰規劃的謀略…

【位運算】【前綴和】個人練習-Leetcode-1177. Can Make Palindrome from Substring

題目鏈接&#xff1a;https://leetcode.cn/problems/can-make-palindrome-from-substring/description/ 題目大意&#xff1a;給出一個字符串s&#xff0c;每次query給出l, r, k&#xff0c;要求判斷子串s[l:r1]在經過k次操作后是否能變為回文串。一次操作可以將子串內的一個字…

mysql 數據庫在liunx 上的備份和恢復

一. mysql 數據庫備份 sh 腳本 1. vim sqlback.sh #!/bin/bashUSER"root" #賬號 PASSWORD"123456" #密碼 DATABASE"test" #數據庫名 BACKUP_DIR"/home/dev/mysql" #備份存的目錄 TIMESTAMP$(date "%F") …

搭建python虛擬環境,并在VSCode中使用

創建環境 python -m venv E:\python\flask\venv激活環境 運行下圖所示的bat文件 退出環境 執行下面的語句 deactivateVSCode中配置&#xff1a; ①使用CTRLshiftp命令&#xff0c;使用CTRLshiftp命令&#xff0c;輸入&#xff1a; Python: Select Interpreter②選擇之前創建…

【計算視覺】學習計算機視覺你不得不膜拜的CVPR大神:何凱明

目錄 第一章&#xff1a;CVPR——計算機視覺的終極擂臺 第二章&#xff1a;何凱明——計算機視覺領域的耀眼星辰 第三章&#xff1a;高引用論文——計算機視覺研究的璀璨星辰 第四章&#xff1a;何凱明的CVPR論文——深度學習的探索之旅 第五章&#xff1a;結語——向何凱…

翻譯《The Old New Thing》- Why isn’t there a SendThreadMessage function?

Why isnt there a SendThreadMessage function? - The Old New Thing (microsoft.com)https://devblogs.microsoft.com/oldnewthing/20081223-00/?p19743 Raymond Chen 2008年12月23日 為什么沒有 SendThreadMessage 函數&#xff1f; 簡要 文章討論了 Windows 中不存在 Sen…

WHAT - 發布訂閱

目錄 一、常見實現方案1.1 使用事件發射器&#xff08;Event Emitter&#xff09;1.2 自定義事件系統&#xff08;EventBus&#xff09;1.3 使用庫如 PubSubJS1.4 使用框架內置的狀態管理工具Vue.jsReact (使用 Context API 或 Redux) 二、先后關系2.1 緩存事件數據2.2 使用 Re…

React hooks動態配置側邊欄

React hooks根據不同需求 還有不同的角色 動態的去配置側邊欄 需求&#xff1a; 點擊某個按鈕是一套側邊欄 &#xff0c;不同角色&#xff08;比如管理員之類的權限高一點&#xff09;比普通用戶多個側邊欄 然后點擊另一個按鈕是另一套側邊欄 此時&#xff0c;就需要動態的去…

【React】classnames 優化類名控制

1. 介紹 classnames是一個簡單的JS庫&#xff0c;可以非常方便的通過條件動態的控制class類名的顯示 ClassNames是一個用于有條件處理classname字符串連接的庫 簡單來說就是動態地去操作類名&#xff0c;把符合條件的類名粘在一起 現在的問題&#xff1a;字符串的拼接方式不…