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

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

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

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

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

一、需求分析,問題描述

1、需求

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

2、問題

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

二、解決問題,答案速覽

1、Watch監聽器-監聽Ref

(1)監聽單個ref對象

對于單個ref對象的監聽,我們只需要直接監聽即可,沒有套路。qyD28資訊網——每日最新資訊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>

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

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

對于單個ref對象的基本類型值的監聽,我們需要借助getter函數監聽。直接監聽會報警告,并且監聽不到變化。qyD28資訊網——每日最新資訊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>

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

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

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

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

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

對于多個ref對象或其值的監聽,我們需要使用數組將watch監聽器的目標包裹。qyD28資訊網——每日最新資訊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>

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

2、Watch監聽器-監聽Reactive

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

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

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

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

至于解決的辦法很簡單, 我們不去直接監聽一個引用類型,而是去監聽引用類型中一個具體的值即可。qyD28資訊網——每日最新資訊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>

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

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

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

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

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

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

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

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

如果是監聽對象類型屬性中的某個屬性值,則不需要開啟deep深度監聽。qyD28資訊網——每日最新資訊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>

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

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

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

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

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

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

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

三、問題解析,知識總結

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

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

2、怎樣停止watch監聽?

有的時候,我們可能只需要監聽一次。在監聽之后,我們就需要取消對watch的監聽。此時我們可以這樣做,將watch監聽器賦值給一個變量,在取消監聽的時候調用此變量即可。qyD28資訊網——每日最新資訊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緩存策略

標簽:
  • 熱門焦點
Top 主站蜘蛛池模板: 西昌市| 封开县| 呼伦贝尔市| 涟源市| 通榆县| 邹城市| 潮州市| 顺昌县| 浑源县| 彝良县| 新宁县| 张家口市| 姚安县| 通州市| 江永县| 漾濞| 富锦市| 汕尾市| 英吉沙县| 新昌县| 长垣县| 万源市| 阳东县| 青神县| 临西县| 平罗县| 祥云县| 德阳市| 那坡县| 桂阳县| 华安县| 多伦县| 桃园县| 道孚县| 古田县| 商南县| 开封市| 华池县| 三门县| 德钦县| 台东县|