vue3使用ref監(jiān)聽復(fù)雜類型過程
更新時間：2025年10月28日 16:18:40 作者：icpink_
文章主要介紹了如何使用Vue的watch函數(shù)監(jiān)聽由ref創(chuàng)建的響應(yīng)式數(shù)據(jù),特別是針對引用數(shù)據(jù)類型,通過定義數(shù)據(jù)、監(jiān)聽變化并使用方法改值,可以在控制臺查看監(jiān)聽效果,文章還提到了在watch中使用{deep:true}和immediate:true選項,以實現(xiàn)深度監(jiān)聽和初始化時立即觸發(fā)監(jiān)聽器
vue3使用ref監(jiān)聽復(fù)雜類型
1.使用watch監(jiān)聽
基于 ref 創(chuàng)建的響應(yīng)式數(shù)據(jù) (引用數(shù)據(jù)類型)。
import { ref, watch } from "vue";2.定義數(shù)據(jù)，監(jiān)聽
const person = ref({ name: '張三' });
watch(
person,
(newVal) => {
console.log('監(jiān)聽到數(shù)據(jù)111:', newVal)
console.log('監(jiān)聽到數(shù)據(jù)222:', newVal.name)
},
{ deep:true }
)3.使用一個方法改值
然后在控制臺查看
const submitForm = () => {
person.value.name +='1'
}
4.ref定義的一個對象
監(jiān)聽它的一個屬性
const person2 = ref({ name: '張三' });
watch(
() => person2.value.name,
(newv) => {
console.log(newv);
//其中的newv就是最新值
//可以在這里做些什么
},
{ deep: true }
)由此我們可以得出結(jié)論，我們操作數(shù)據(jù)的時候，盡管是ref定義的，但是并不用.value去 讀改它。
還可以在 { deep: true}平級，加上immediate: true 頁面初始化的時候就監(jiān)聽。
{ deep: true, immediate: true }總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了VUE+Element環(huán)境搭建與安裝的方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要為大家詳細介紹了vue實現(xiàn)文件上傳功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-08-08
vue3基礎(chǔ)組件開發(fā)detePicker日期選擇組件示例
這篇文章主要為大家介紹了vue3基礎(chǔ)組件開發(fā)-detePicker（日期選擇組件）示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
網(wǎng)頁截圖與截屏功能在許多Web應(yīng)用程序中都非常有用,Vue.js作為一個流行的JavaScript框架,提供了許多工具和庫來簡化網(wǎng)頁截圖和截屏的實現(xiàn),本文將介紹如何使用Vue來實現(xiàn)一個網(wǎng)頁截圖和截屏功能的示例,包括使用html2canvas庫和vue-cropper庫,需要的朋友可以參考下2023-10-10
下面小編就為大家?guī)硪黄赩ue實例對象的數(shù)據(jù)選項。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
Vue組件開發(fā)之LeanCloud帶圖形校驗碼的短信發(fā)送功能
Vue是目前使用較廣泛的三大前端框架之一，其數(shù)據(jù)驅(qū)動及組件化的特性使得前端開發(fā)更為快捷便利。本文在LeanCloud 短信轟炸與圖形校驗碼官方文檔 基礎(chǔ)上，從封裝需要出發(fā)開發(fā)一個簡單的短信圖形驗證Vue組件,具體內(nèi)容詳情大家參考下本文2017-11-11
這篇文章主要介紹了vue elementui上傳圖片限制格式、大小和尺寸方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要為大家詳細介紹了Vue.js第四天的學(xué)習(xí)筆記，一個簡單的組件示例,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
詳解基于Vue cli開發(fā)修改外部組件Vant默認(rèn)樣式
這篇文章主要介紹了詳解基于Vue cli開發(fā)修改外部組件Vant默認(rèn)樣式,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
這篇文章主要介紹了前端vue打包項目，如何解決跨域問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05