vue中的this.$set

在 Vue 2 中,this.$set 是一個用于響應式地添加新屬性到已有對象的全局 API。它的主要作用是解決 Vue 無法檢測到對象屬性添加或刪除的限制(由于 Vue 2 的響應式系統基于 Object.defineProperty 實現)。


1. 為什么需要 this.$set

在 Vue 2 中,直接給對象添加新屬性(如 this.obj.newProperty = value不會觸發視圖更新,因為 Vue 無法攔截這種動態添加的屬性變化。


2. 語法

this.$set(target, propertyName, value)
  • target:目標對象(必須是響應式對象,如 Vue 實例的 data 或 Vuex 的 state)。
  • propertyName:要添加的新屬性名(字符串或 Symbol)。
  • value:新屬性的值。

3. 示例

場景 1:動態添加對象屬性
// 錯誤寫法(不會觸發視圖更新)
this.user.age = 25;// 正確寫法(使用 $set)
this.$set(this.user, 'age', 25);
場景 2:動態更新數組索引

雖然 Vue 2 對數組的響應式處理有類似限制(無法直接通過索引修改數組,如 this.arr[0] = newValue),但 $set 也可以用于數組:

// 錯誤寫法
this.items[0] = { name: 'New Item' };// 正確寫法
this.$set(this.items, 0, { name: 'New Item' });

4. 替代方案(Vue 3 及 Composition API)

在 Vue 3 中,響應式系統改用 Proxy不再需要 $set,因為動態添加屬性會自動被追蹤:

// Vue 3 中直接添加即可
this.user.age = 25; // 會自動觸發視圖更新

5. 注意事項

  • 僅對響應式對象有效:如果 target 是非響應式對象(如普通字面量),$set 無效。
  • 優先使用 Vue.set:在非組件上下文(如普通函數)中,使用 Vue.set(obj, key, value)
  • 數組方法:對于數組,優先使用 Vue 重寫的響應式方法(如 pushsplice)。

總結

Vue 版本是否需要 $set原因
Vue 2? 需要響應式系統基于 defineProperty
Vue 3? 不需要響應式系統基于 Proxy

在 Vue 2 中,遇到動態添加屬性或數組索引更新的場景,記得用 this.$set

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

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

相關文章

python爬蟲技術——基礎知識、實戰

參考文獻: Python爬蟲入門(一)(適合初學者)-CSDN博客 一、常用爬蟲工具包 Scrapy 語言: Python特點: 高效、靈活的爬蟲框架,適合大型爬蟲項目。 BeautifulSoup 語言: Python特點: 用于解析HTML和XML,簡單易用。 Sel…

QT 交叉編譯環境下,嵌入式設備顯示字體大小和QT Creator 桌面顯示不一致問題解決

第一步: 發送fc-list 命令 ,查找嵌入式環境下支持的字庫第二步 為每個控件指定字庫文件,以label控件為例:int fontId QFontDatabase::addApplicationFont("/usr/share/fonts/source-han-sans-cn/SourceHanSansCN-Normal.otf…

php生成二維碼

<?php // 包含qrlib庫 require_once(qrlib.php);// 二維碼內容 $data https://www.example.com;// 生成二維碼圖片的文件名 $filename qrcode.png;// 二維碼參數 $errorCorrectionLevel L; // 錯誤糾正級別 $matrixPointSize 5; // 生成圖片大小// 生成二維碼 QR…

#systemverilog# 關鍵字之 變量聲明周期與靜態方法關系探討

我們先看來年下面的代碼: class test; task static bar(); …… endtask class test; static task bar(); …… endtask 在 SystemVerilog 中,這兩種聲明方式有本質區別,涉及方法的靜態/非靜態屬性以及局部變量的生命周期。 1. task static bar(); ... endt…

vim與 neovim 的使用

使用 Vim 閱讀 Linux 內核源碼是一種高效、輕量級的方式。Linux 源碼工程非常龐大&#xff0c;因此推薦你結合 Vim 的一些插件和功能來提高代碼導航和閱讀效率。 下面是一個完整的指南&#xff0c;幫你用 Vim 更高效地閱讀 Linux 源碼。 &#x1f527; 一、準備工作 1. 克隆 …

編譯原理第六到七章(知識點學習/期末復習/筆試/面試)

第六章 句法制導翻譯概述句法制導翻譯概述什么是句法制導翻譯編譯的階段&#xff1a;詞法分析→句法分析→語義分析→中間代碼生成→代碼優化→目標代碼生成語義翻譯&#xff1a;語義分析和中間代碼生成句法制導翻譯 &#xff1a;句法分析和語義分析和中間代碼生成句法制導翻譯…

Pytorch深度學習框架實戰教程02:開發環境部署

相關章節 《Pytorch深度學習框架實戰教程09&#xff1a;模型的保存和加載》 《Pytorch深度學習框架實戰教程01&#xff1a;深度學習框架簡介》 本文詳細介紹了PyTorch CPU/GPU雙版本的完整安裝流程&#xff0c;從環境準備到部署驗證&#xff0c;助你快速搭建高效深度學習開發…

初試Spring AI實現聊天功能

文章目錄 1. 實戰概述 2. 實現步驟 2.1 申請API Key 2.2 創建Spring Boot項目 2.3 添加兩個項目相關依賴 2.4 應用屬性文件里配置Spring AI 2.5 修改啟動類注解屬性 2.6 創建第一個聊天控制器 2.7 創建聊天結果頁面 2.8 測試第一個聊天控制器 2.9 創建第二個聊天控制器 2.10 創…

【圖像處理基石】如何入門色彩評估?

什么是色彩評估&#xff1f; 色彩評估是對色彩的屬性、表現、一致性及適用性進行科學分析和主觀/客觀判斷的過程&#xff0c;核心是通過系統方法判斷色彩是否符合預期標準&#xff08;如設計要求、行業規范、視覺效果等&#xff09;&#xff0c;廣泛應用于印刷、紡織、涂料、產…

6、docker network

docker網絡驅動Docker 網絡驅動是 Docker 容器網絡通信的核心機制&#xff0c;負責管理容器之間的連接、隔離和跨主機通信。Docker 網絡驅動的作用網絡隔離通過網絡命名空間&#xff08;Network Namespace&#xff09;為每個容器提供獨立的網絡環境&#xff0c;確保容器之間的網…

Qt Quick 粒子系統詳解

Qt Quick 粒子系統詳解Qt Quick 粒子系統詳解一、核心組件二、粒子運動數學模型三、基本粒子系統結構四、完整示例1、火焰效果2、雪花飄落效果3、煙花爆炸效果五、性能優化技巧六、實例展示Qt Quick 粒子系統詳解 Qt Quick 粒子系統是用于創建動態視覺特效&#xff08;如爆炸、…

AI問答-供應鏈管理:各種交通運輸方式貨運成本分析

一、各種交通運輸方式貨運成本分析運輸方式主要成本構成成本特點適用場景成本優勢分析成本劣勢分析參考費用&#xff08;示例&#xff09;里程/價格公路運輸燃料費用、人工成本&#xff08;司機工資、維修工人工資等&#xff09;、維修費用、保險費用、道路通行費、折舊費、稅費…

redis速記

1.什么是緩存穿透&#xff1f;怎么解決&#xff1f;答&#xff1a;緩存穿透是指用戶請求的數據在緩存&#xff08;如 Redis&#xff09;和數據庫&#xff08;如 MySQL&#xff09;中都不存在&#xff0c;導致每次請求都必須繞過緩存直接查詢數據庫&#xff0c;最終大量無效請求…

aspnetcore Mvc配置選項中的ModelMetadataDetailsProviders

在ASP.NET Core 中&#xff0c;ModelMetadataDetailsProviders 是用于配置模型元數據提供程序的核心組件&#xff0c;它決定了如何解析和提供模型屬性的元數據&#xff08;如數據類型、驗證規則、顯示名稱等&#xff09;。以下是其詳細解析&#xff1a; 一、核心概念與作用 模…

分區表設計:歷史數據歸檔與查詢加速

以下為分區表設計的核心實現方案與技術要點&#xff0c;綜合最新技術實踐整理&#xff1a;一、分區表核心機制與價值?物理存儲與邏輯分離?分區表通過預定義規則&#xff08;如時間戳、ID范圍&#xff09;將大表物理拆分為多個子表&#xff08;分區&#xff09;&#xff0c;對…

下班倒計時

下班倒計時#include <stdio.h> #include <time.h> #include <unistd.h>void print_remaining_time(time_t now, time_t tar_time) {double diff difftime(tar_time, now);int hours (int)diff / 3600;int minutes ((int)diff % 3600) / 60;int seconds (…

Vue配置特性(ref、props、混入、插件與作用域樣式)

前言Vue提供了許多高級特性來增強組件開發的能力。本文將深入解析Vue中的ref屬性、props配置、混入(mixin)、插件開發以及scoped樣式等核心特性&#xff0c;通過實例演示它們的用法&#xff0c;并給出最佳實踐建議。一、ref屬性詳解1. ref基本用法ref用于給元素或子組件注冊引用…

解析力和清晰度區別

在視覺成像、光學設備或數字信號處理領域&#xff0c;清晰度和解析力是兩個相關但側重點不同的概念。它們都與“細節呈現”有關&#xff0c;但核心定義、影響因素和應用場景存在顯著區別。以下從定義、核心差異、聯系三個方面詳細說明&#xff1a; 一、核心定義清晰度&#xff…

Java網絡通信:UDP和TCP

一、UDP特點&#xff1a; 無連接不可靠&#xff1a;通信雙方不事先建立連接&#xff0c;直接發送數據。數據封裝&#xff1a;將數據封裝在64KB的數據包中&#xff0c;包含接收端的IP和端口。UDP通信模型&#xff1a; 模型比喻&#xff1a;以拋韭菜為例&#xff0c;發送端像拋韭…

Java行為型模式(狀態模式)實現方式與測試方法

一、狀態模式實現方式 核心結構 狀態接口&#xff08;State&#xff09;&#xff1a;定義狀態相關的行為方法。具體狀態類&#xff08;ConcreteState&#xff09;&#xff1a;實現狀態接口&#xff0c;封裝特定狀態下的邏輯。上下文類&#xff08;Context&#xff09;&#xff…