日韩成人免费在线_国产成人一二_精品国产免费人成电影在线观..._日本一区二区三区久久久久久久久不

當前位置:首頁 > 科技  > 軟件

Vue3問題:如何解決Watch監聽對象數組失效,及如何停止監聽?

來源: 責編: 時間:2023-11-16 09:39:23 278觀看
導讀一、需求分析,問題描述1、需求監聽數組或對象,修改其屬性數據,但watch并沒有監聽到變化,尋找原因和解決方式。2、問題怎樣正確使用watch監聽對象和數組?怎樣停止watch監聽?二、解決問題,答案速覽1、Watch監聽器-監聽Ref(1)監聽

od728資訊網——每日最新資訊28at.com

一、需求分析,問題描述

1、需求

監聽數組或對象,修改其屬性數據,但watch并沒有監聽到變化,尋找原因和解決方式。od728資訊網——每日最新資訊28at.com

2、問題

  • 怎樣正確使用watch監聽對象和數組?
  • 怎樣停止watch監聽?

二、解決問題,答案速覽

1、Watch監聽器-監聽Ref

(1)監聽單個ref對象

對于單個ref對象的監聽,我們只需要直接監聽即可,沒有套路。od728資訊網——每日最新資訊28at.com

<script setup>import { reactive, ref, watch, computed } from 'vue';// 定義數據let nameRef = ref('大澈')// 點擊事件-修改數據的值const handleChange = () => {  nameRef.value = '程序員大澈'}// 監聽數據變化watch(nameRef, (newValue, oldValue) => {  console.log(`新的值是:${newValue},舊的值是:${oldValue}`);})</script>

od728資訊網——每日最新資訊28at.com

(2)監聽單個ref對象的值-基本類型值

對于單個ref對象的基本類型值的監聽,我們需要借助getter函數監聽。直接監聽會報警告,并且監聽不到變化。od728資訊網——每日最新資訊28at.com

<script setup>import { reactive, ref, watch, computed } from 'vue';// 定義數據let nameRef = ref('大澈')// 點擊事件-修改數據的值const handleChange = () => {  nameRef.value = '程序員大澈'}// 監聽數據變化watch(() => nameRef.value, (newValue, oldValue) => {  console.log(`新的值是:${newValue},舊的值是:${oldValue}`);})</script>

od728資訊網——每日最新資訊28at.com

(3)監聽單個ref對象的值-復雜類型值

內部自動將值轉為reactive對象,監聽reactive對象的詳細見下文。od728資訊網——每日最新資訊28at.com

od728資訊網——每日最新資訊28at.com

(4)監聽多個ref對象或其值

對于多個ref對象或其值的監聽,我們需要使用數組將watch監聽器的目標包裹。od728資訊網——每日最新資訊28at.com

<script setup>import { reactive, ref, watch, computed } from 'vue';// 定義數據let nameRef111 = ref('大澈111')let nameRef222 = ref('大澈222')// 點擊事件-修改數據的值const handleChange = () => {  nameRef111.value = '程序員大澈111'  nameRef222.value = '程序員大澈222'}// 監聽數據變化watch([nameRef111, () => nameRef222.value], (newValue, oldValue) => {  console.log(`新的值是:${newValue[0]},舊的值是:${oldValue[0]}`);})</script>

od728資訊網——每日最新資訊28at.com

2、Watch監聽器-監聽Reactive

(1)監聽單個reactive對象-對象類型值

對于單個reactive對象的對象類型值的監聽,我們只需要直接監聽即可,沒有套路。od728資訊網——每日最新資訊28at.com

但此時我們會發現,watch的新值和舊值是相同的,為什么會這樣呢?又怎么解決呢?od728資訊網——每日最新資訊28at.com

因為對于引用類型數據,賦值存的是地址,地址指向的是堆,所以無論值怎么改變,新舊對象都指向同一個地址。od728資訊網——每日最新資訊28at.com

至于解決的辦法很簡單, 我們不去直接監聽一個引用類型,而是去監聽引用類型中一個具體的值即可。od728資訊網——每日最新資訊28at.com

<script setup>import { reactive, ref, watch, computed } from 'vue';// 定義數據let dataReactive = reactive({  name: '大澈',})// 點擊事件-修改數據的值const handleChange = () => {  dataReactive.name = '程序員大澈'}// 監聽數據變化watch(dataReactive, (newValue, oldValue) => {  console.log(`新的值是:${newValue.name},舊的值是:${oldValue.name}`);})</script>

od728資訊網——每日最新資訊28at.com

(2)監聽單個reactive對象-對象類型值-基本類型屬性

對于單個reactive對象的對象類型值的基本類型屬性的監聽,我們需要借助getter函數監聽。直接監聽會報警告,并且監聽不到變化。od728資訊網——每日最新資訊28at.com

值得注意的是,watch的新值和舊值是不同的了。od728資訊網——每日最新資訊28at.com

od728資訊網——每日最新資訊28at.com

(3)監聽單個reactive對象-對象類型值-對象類型屬性

對于單個reactive對象的對象類型值的對象類型屬性的監聽,我們需要借助getter函數監聽。直接監聽會報警告,并且監聽不到變化。od728資訊網——每日最新資訊28at.com

如果是監聽整個對象類型屬性,只有進行整個對象替換時,才不需要開啟deep深度監聽。其它時候,如修改、刪除、新增,都需要開啟deep深度監聽,才能監聽數據的變化。od728資訊網——每日最新資訊28at.com

如果是監聽對象類型屬性中的某個屬性值,則不需要開啟deep深度監聽。od728資訊網——每日最新資訊28at.com

<script setup>import { reactive, ref, watch, computed } from 'vue';// 定義數據let dataReactive = reactive({  obj: {    age: 18,  },})// 點擊事件-修改數據的值const handleChange = () => {  dataReactive.obj.age = 99}// 監聽數據變化watch(() => dataReactive.obj, (newValue, oldValue) => {  console.log(`新的值是:${newValue.age},舊的值是:${oldValue.age}`);}, {  deep: true,})</script>

od728資訊網——每日最新資訊28at.com

(4)監聽單個reactive對象-對象類型值-數組類型屬性

同監聽單個reactive對象-對象類型值-對象類型屬性。od728資訊網——每日最新資訊28at.com

(5)監聽單個reactive對象-數組類型值

所有情況都同監聽單個reactive對象-對象類型值。od728資訊網——每日最新資訊28at.com

(6)監聽多個reactive對象值或其屬性值

同監聽多個ref對象或其值。od728資訊網——每日最新資訊28at.com

三、問題解析,知識總結

1、怎樣正確使用watch監聽對象和數組?

內容如上。od728資訊網——每日最新資訊28at.com

2、怎樣停止watch監聽?

有的時候,我們可能只需要監聽一次。在監聽之后,我們就需要取消對watch的監聽。此時我們可以這樣做,將watch監聽器賦值給一個變量,在取消監聽的時候調用此變量即可。od728資訊網——每日最新資訊28at.com

<script setup>import { reactive, ref, watch, computed } from 'vue';// 定義數據let nameRef = ref('大澈')// 點擊事件-修改數據的值const handleChange = () => {  nameRef.value = '程序員大澈'}// 點擊事件-停止對應的watch監聽數據const handleStopChange = () => {  stopWatch()}// 監聽數據變化const stopWatch = watch(() => nameRef.value, (newValue, oldValue) => {  console.log(`新的值是:${newValue},舊的值是:${oldValue}`);})</script>

本文鏈接:http://www.www897cc.com/showinfo-26-26545-0.htmlVue3問題:如何解決Watch監聽對象數組失效,及如何停止監聽?

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。郵件:2376512515@qq.com

上一篇: .NET Core下有熱門的ORM框架使用方法

下一篇: Android | LruCache緩存策略

標簽:
  • 熱門焦點
  • vivo TWS Air開箱體驗:真輕 臻好聽

    在vivo S15系列新機的發布會上,vivo的最新款真無線藍牙耳機vivo TWS Air也一同發布,本次就這款耳機新品給大家帶來一個簡單的分享。外包裝盒上,vivo TWS Air保持了vivo自家產
  • 6月安卓手機好評榜:魅族20 Pro蟬聯冠軍

    性能榜和性價比榜之后,我們來看最后的安卓手機好評榜,數據來源安兔兔評測,收集時間2023年6月1日至6月30日,僅限國內市場。第一名:魅族20 Pro好評率:95%5月份的時候魅族20 Pro就是
  • 帥氣純真少年!日本最帥初中生選美冠軍出爐

    日本第一帥哥初一生選美大賽冠軍現已正式出爐,冠軍是來自千葉縣的宗田悠良。日本一直熱衷于各種選美大賽,從&ldquo;最美JK&rdquo;起到&ldquo;最美女星&r
  • 讓我們一起聊聊文件的操作

    文件【1】文件是什么?文件是保存數據的地方,是數據源的一種,比如大家經常使用的word文檔、txt文件、excel文件、jpg文件...都是文件。文件最主要的作用就是保存數據,它既可以保
  • 三言兩語說透柯里化和反柯里化

    JavaScript中的柯里化(Currying)和反柯里化(Uncurrying)是兩種很有用的技術,可以幫助我們寫出更加優雅、泛用的函數。本文將首先介紹柯里化和反柯里化的概念、實現原理和應用
  • 微軟邀請 Microsoft 365 商業用戶,測試視頻編輯器 Clipchamp

    8 月 1 日消息,微軟近日宣布即將面向 Microsoft 365 商業用戶,開放 Clipchamp 應用,邀請用戶通過該應用來編輯視頻。微軟于 2021 年收購 Clipchamp,隨后開始逐步整合到 Microsof
  • 2天漲粉255萬,又一賽道在抖音爆火

    來源:運營研究社作者 | 張知白編輯 | 楊佩汶設計 | 晏談夢潔這個暑期,旅游賽道徹底火了:有的「地方」火了&mdash;&mdash;貴州村超旅游收入 1 個月超過 12 億;有的「博主」火了&m
  • 消費結構調整丨巨頭低價博弈,拼多多還卷得動嗎?

    來源:征探財經作者:陳香羽隨著流量紅利的退潮,電商的存量博弈越來越明顯。曾經主攻中高端與品質的淘寶天貓、京東重拾&ldquo;低價&rdquo;口號。而過去與他們錯位競爭的拼多多,靠
  • 利用職權私自解除被封帳號 Meta開除20多名員工

    11月18日消息,據外媒援引知情人士表示,過去一年時間內,Facebook母公司Meta解雇或處罰了20多名員工以及合同工,指控這些人通過內部系統以不當方式重置用戶帳號,其
Top 主站蜘蛛池模板: 龙岩市| 西贡区| 赤水市| 澄城县| 北宁市| 吐鲁番市| 来凤县| 开原市| 庆元县| 汪清县| 台中市| 上蔡县| 白城市| 招远市| 八宿县| 桂阳县| 黄山市| 兴国县| 措勤县| 高雄县| 新野县| 廊坊市| 蒙自县| 竹溪县| 姜堰市| 静海县| 通城县| 孝义市| 石柱| 怀远县| 永顺县| 霍州市| 信阳市| 达州市| 文化| 宜君县| 黄陵县| 方山县| 新安县| 睢宁县| 景宁|