Vue 中如何監測數組的變化?

来源:https://www.cnblogs.com/yuzhihui/archive/2023/01/19/17062222.html
-Advertisement-
Play Games

在 Vue 中,如果直接對數組進行操作,比如使用下標直接修改元素, Vue 是無法監測到這種變化的,導致無法觸發視圖更新。因此如何監測數組變化是值得關註的問題。 ...


在 Vue 中,如果直接對數組進行操作,比如使用下標直接修改元素,數組長度不變時, Vue 是無法監測到這種變化的,導致無法觸發視圖更新。針對該問題,總結如下解決方法:

一、使用 Vue.js 提供的方法來更新數組

在 Vue.js 中,可以使用 Vue.set(target, key, value)vm.$set(target, key, value) 來監測數組變化。例如:

// 使用 Vue.set()
Vue.set(vm.items, indexOfItem, newValue)

// 使用 vm.$set
vm.$set(vm.items, indexOfItem, newValue)

除了上述方法之外,Vue.js 還提供了一些其它的方法來監測數組變化,如 push()pop()shift()unshift()splice()sort()reverse()。這些方法都是基於數組原型鏈上的方法,Vue.js 通過重寫這些方法來監測數組變化。

例如,如果要在數組末尾添加一個新的元素,可以使用 vm.items.push(newItem)

你也可以使用vm.items.length = newLength來修改數組長度,這樣也會觸發視圖更新。

總之,在 Vue.js 中,如果你想要監測數組變化,最好使用 Vue.js 提供的方法來更新數組。

二、使用專門用於監測數組變化的語法糖

另外,Vue.js提供了一些專門用於監測數組變化的語法糖,如 v-for 指令,它允許我們遍曆數組並渲染每個元素。當數組發生變化時,v-for 指令會自動重新渲染視圖。

三、使用Vue.observable()函數

還有,對於對象變化的監測,我們可以使用Vue.observable()函數來創建一個可監測的對象。

使用 Vue.observable() 可以避免使用 Vue.set() 或 vm.$set() 來監測對象的變化。

例如:

const obj = Vue.observable({
  prop: 'value'
})

四、使用 computed 屬性和 watch 屬性監測數組變化

computed 屬性是 Vue.js 中的一種計算屬性,它可以根據其他屬性的值進行計算得到新的值。當其他屬性的值發生變化時,computed 屬性也會隨之變化。

watch 屬性是 Vue.js 中的一種監聽屬性,它可以監聽某個屬性的變化並執行相應的函數。

例如:

computed: {
  filteredItems() {
    return this.items.filter(item => item.age > 18)
  }
},
watch: {
  items: {
    immediate: true,
    handler() {
      console.log('items changed')
    }
  }
}

使用 computed 和 watch 屬性可以方便地監測數組和對象的變化,並執行相應的操作。

五、使用 Deep Watcher 方法

watch: {
  'myArray': {
    deep: true,
    handler: function (val) {
    // do something with the new and old value of myArray
    }
  }
}

當 deep 為 true 時,Vue 會遞歸監測數組中所有對象的變化,但是會帶來一些性能開銷,所以在實際使用中需要根據實際需要來確定是否使用 deep watcher。

六、使用 $watch 函數

mounted() {
  this.$watch(
    'myArray',
    function(newVal, oldVal) {
      // do something with the new and old value of myArray
    },
    {
      deep: true
    }
  )
}

$watch 方法接收三個參數,第一個是要監測的屬性,第二個是回調函數,第三個是配置對象,可以使用 deep 選項來監測對象中的變化。

七、使用 Vue 的 $forceUpdate() 方法

使用 Vue 的 $forceUpdate() 方法來強制組件重新渲染,這樣就可以監測到數組的變化。

this.$forceUpdate()

這樣做會讓組件強制重新渲染, 但是這樣會有一些性能開銷,所以不建議在組件中頻繁使用 $forceUpdate()。

八、使用 Vue 中的 $nextTick() 方法

使用 Vue 中的 $nextTick() 方法來監測數組變化。$nextTick() 函數可以在下一次 DOM 更新迴圈結束之後執行延遲回調。

this.$nextTick(() => {
  // your code
})

這樣可以確保在數組變化之後再執行相關的操作,這樣就可以監測到數組的變化。

九、使用 reactive 函數

Vue3 中可以使用 reactive 函數來創建響應式的數組,這樣就可以監測到數組的變化。

import { reactive } from 'vue'

const state = reactive({
  myArray: [1, 2, 3]
})

這樣Vue3就會自動監測 myArray 變化。

十、使用 vue-devtools 中的 track 功能

註意:該方法無法解決修改數組未觸發視圖更新的問題,屬於數組監測問題

 

總之,Vue.js 提供了多種方法來監測數組和對象的變化,如使用 Vue.set(),splice(),$set(),$delete(),watch,computed,$watch(),vue-devtools 中的 “track” 功能,Vue3 中的 reactive 函數,$forceUpdate() 和 $nextTick() 等方法,可以根據需要選擇合適的方法來實現。

作者:yuzhihui
出處:http://www.cnblogs.com/yuzhihui/ 聲明:歡迎任何形式的轉載,但請務必註明出處!!!
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 2023-01-18 一、AOP前奏-代理模式 1、手動實現動態代理環境搭建 (1)基於介面實現動態代理:JDK動態代理 (2)基於繼承實現動態代理:Cglib、javassist動態代理 2、實現動態代理的步驟 (1)一個類:Proxy ①概述:Proxy代理類的基類(類似於Object) ②作用 ...
  • 1 簡介 Solace是一個強大的實時性的事件驅動消息隊列。本文將介紹如何在Spring中使用,雖然代碼使用的是Spring Boot,但並沒有使用相關starter,跟Spring的整合一樣,可通用。JMS是通過的消息處理框架,可以深入學習一下,不同的MQ在JMS的整合上都是類似的。 2 通過Do ...
  • 2023-01-18 一、Spring中組件掃描 1、預設使用的情況 <context:component-scan base-package="com.hh"></context:component-scan> 2、包含掃描 註:使用包含掃描之前,必須設置use-default-filters=" ...
  • EntityFrameworkCore是微軟官網提供的ORM框架,是輕量化、可擴展、開源和跨平臺的數據訪問技術框架,但是在.Net 開發圈的評論卻褒貶不一。很多人認為EFCore 執行的效能比較差,很多複雜的查詢場景很難實現,也有很多人認為,EFCore 開發簡單,在中小型項目中,能夠快速的實現業務 ...
  • 運行環境:Window10,.Net7.0; 編者:烏龍哈里 2023-01-13 經常碰到兩個控制項需要相互傳遞消息,這時候需要用到事件。比如現有兩個類如下: class AA { private string Text = "AA"; public void SetText(string s) { ...
  • Cortex M 的中斷和優先順序, 首先要區分開 中斷 和 中斷優先順序 這是兩個不同的東西, 對於 Cortex-M0 和 Cortex-M0+ 內核, 除了系統內建中斷外, 支持最多 32 個中斷. 對於 Cortex-M3 內核, 除了 16 個內核中斷外, 支持最多 240 個中斷, 有8-b... ...
  • 分組數據 數據分組 分組允許把數據分為多個邏輯組,以便能對每個組進行聚集計算。 創建分組 分組是在SELECT語句的GROUP BY子句中建立的: SELECT vend_id, COUNT(*) AS num_prods FROM products GROUP BY vend_id; 註意: GR ...
  • 關於資料庫的性能優化其實是一個很複雜的大課題,很難通過一篇帖子講的很全面和深刻,這也就是為什麼我的標題是‘淺析’,程式員的成長一定是要付出代價和成本,因為只有真的在一線切身體會到當時的緊張和壓力,對於一件事情才能印象深刻,但反之也不能太過於強調代價,如果可以通過一些別人的分享就可以規避一些自己業務的... ...
一周排行
    -Advertisement-
    Play Games
  • 一:背景 1. 講故事 年前遇到了好幾例托管堆被損壞的案例,有些運氣好一些,從被破壞的托管堆記憶體現場能觀測出大概是什麼問題,但更多的情況下是無法做出準確判斷的,原因就在於生成的dump是第二現場,借用之前文章的一張圖,大家可以理解一下。 為了幫助更多受此問題困擾的朋友,這篇來整理一下如何 快狠準 的 ...
  • 前言 .NET6 開始,.NET Croe API 項目取消了 Startup.cs 文件,在 Program.cs 文件的 Main 函數中完成服務的註冊和中間件管道的管理。但當我們項目引入更多包的時候,Program.cs 文件也會看起來很臃腫。 而且,我們不只會有一個後端項目,為了方便快速創建 ...
  • 目錄 背景 get 與 post 的區別 所有介面都用 post 請求? 背景 最近在逛知乎的時候發現一個有趣的問題:公司規定所有介面都用 post 請求,這是為什麼? 看到這個問題的時候其實我也挺有感觸的,因為我也曾經這樣問過我自己。在上上一家公司的時候接到一個項目是從零開始搭建一個微服務,當時就 ...
  • *以下內容為本人的學習筆記,如需要轉載,請聲明原文鏈接 微信公眾號「englyf」https://mp.weixin.qq.com/s/2GFLTstDC7w6u3fTJxflNA 本文大概 1685 個字,閱讀需花 6 分鐘內容不多, 但也花了一些精力如要交流, 歡迎關註我然後評論區留言 謝謝你的 ...
  • 在新版本的pandas中,上述代碼會引起警告,建議改成SQLAlchemy connectable(engine/connection),後續代碼將引入這種升級的連接方式。 ...
  • 幾乎所有的高級編程語言都有自己的垃圾回收機制,開發者不需要關註記憶體的申請與釋放,Python 也不例外。Python 官方團隊的文章 https://devguide.python.org/internals/garbage-collector 詳細介紹了 Python 中的垃圾回收演算法,本文是這篇 ...
  • 如果您想查找高於或低於平均值的數字,可以不必計算該平均值,就能查看更高或更低的值。通過Java應用程式,可以自動突出顯示這些數字。除了快速突出顯示高於或低於平均值的值外,您還可以查看高於或低於的值的個數。現在讓我們看看如何在 Java應用程式中實現此操作。 引入jar包 導入方法1: 手動引入。將  ...
  • 第一種方式:使用{} firstDict = {"name": "wang yuan wai ", "age" : 25} 說明:{}為創建一個空的字典對象 第二種方式:使用fromkeys()方法 second_dict = dict.fromkeys(("name", "age")) #valu ...
  • 在golang中可以使用a := b這種方式將b賦值給a,只有當b能進行深拷貝時a與b才不會互相影響,否則就需要進行更為複雜的深拷貝。 下麵就是Go賦值操作的一個說明: Go語言中所有賦值操作都是值傳遞,如果結構中不含指針,則直接賦值就是深度拷貝;如果結構中含有指針(包括自定義指針,以及切片,map ...
  • 本文結合京東監控埋點場景,對解決樣板代碼的技術選型方案進行分析,給出最終解決方案後,結合理論和實踐進一步展開。通過關註文中的技術分析過程和技術場景,讀者可收穫一種樣板代碼思想過程和解決思路,並對Java編譯器底層有初步瞭解。 ...