Vue3子組件watch無法監(jiān)聽父組件傳遞的屬性值的解決方法
1 問題描述
假設(shè)子組件 ChildComponent 中有個屬性a，默認(rèn)值為 0，并且通過偵聽器 watch 監(jiān)聽其數(shù)值變化。在父組件 ParentComponent 中調(diào)用子組件并將屬性a的值賦為1傳遞給子組件，發(fā)現(xiàn)子組件模板中a的值是1，但是 watch 并未監(jiān)聽到屬性a的值發(fā)生了變化。
子組件示例代碼：
<template>
<!-- a的值顯示為1 -->
<div>{{ a }}</div>
</template>
<script setup>
import { watch } from 'vue'
const props = defineProps({
a: {
type: Number,
default: 0
}
})
watch(
() => props.a,
(newValue, oldValue) => {
// 下方信息不會打印在控制臺中
console.log('a has changed', newValue, oldVlue)
}
)
</script>
父組件示例代碼：
<template> <ChildComponent :a="1" /> </template>
2 引發(fā)原因
Vue官網(wǎng)：watch 默認(rèn)是懶執(zhí)行的：僅當(dāng)數(shù)據(jù)源變化時，才會執(zhí)行回調(diào)。
Vue 在渲染模板時，先渲染子組件，然后渲染父組件。子組件在初始化時，屬性a的值被賦為默認(rèn)值0，然后父組件進(jìn)行初始化，將 a=1 傳遞給子組件，子組件接收后將新值覆蓋掉原來的舊值，完成初始化。由于子組件屬性是響應(yīng)式的，所以從0變化為1后，會更新模板視圖。該過程發(fā)生在組件初始化階段，watch 函數(shù)首次進(jìn)行綁定，不認(rèn)為數(shù)據(jù)源發(fā)生了變化，所以不會執(zhí)行回調(diào)。
3 解決方法
Vue 提供了 immediate 屬性，設(shè)置該屬性后可以讓 watch 函數(shù)首次綁定后立即執(zhí)行一次回調(diào)，獲取最新的屬性值。
watch(
() => props.a,
(newValue, oldValue) => {
// 打印結(jié)果為 a has changed, 1, 0
console.log('a has changed', newValue, oldVlue)
},
{ immediate: true } // 添加此行
)
到此這篇關(guān)于Vue3子組件watch無法監(jiān)聽父組件傳遞的屬性值的解決方法的文章就介紹到這了,更多相關(guān)Vue3 watch無法監(jiān)聽傳遞的屬性值內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue項目移動端滾動穿透問題的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
本文給大家介紹Vue3 表單輸入綁定的相關(guān)操作,本文結(jié)合實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2025-10-10
關(guān)于vue中對window.openner的使用指南
opener屬性是一個可讀可寫的屬性,可返回對創(chuàng)建該窗口的Window對象的引用,下面這篇文章主要給大家介紹了關(guān)于vue中對window.openner使用的相關(guān)資料,需要的朋友可以參考下2022-11-11
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)記事本小功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
基于vue cli 通過命令行傳參實現(xiàn)多環(huán)境配置
這篇文章主要介紹了vue項目通過命令行傳參實現(xiàn)多環(huán)境配置(基于@vue/cli)的相關(guān)資料,需要的朋友可以參考下2018-07-07
Vue全局?jǐn)r截所有請求并在請求頭中添加token方式
這篇文章主要介紹了Vue全局?jǐn)r截所有請求并在請求頭中添加token方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
vue+element-ui表格封裝tag標(biāo)簽使用插槽
這篇文章主要介紹了vue+element-ui表格封裝tag標(biāo)簽使用插槽，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)移動端拖拽交換位置，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-07-07
詳解實現(xiàn)vue的數(shù)據(jù)響應(yīng)式原理
這篇文章主要介紹了詳解實現(xiàn)vue的數(shù)據(jù)響應(yīng)式原理，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
這篇文章主要介紹了vue-cli腳手架創(chuàng)建項目遇到的坑及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01