Vue3子組件watch無法監(jiān)聽父組件傳遞的屬性值的解決方法

更新時間：2024年10月11日 09:26:13 作者：Vesuvius688

這篇文章主要介紹了Vue3子組件watch無法監(jiān)聽父組件傳遞的屬性值的解決方法,文中通過代碼示例講解的講解的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下

1 問題描述

假設子組件 ChildComponent 中有個屬性a，默認值為 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 默認是懶執(zhí)行的：僅當數(shù)據(jù)源變化時，才會執(zhí)行回調(diào)。

Vue 在渲染模板時，先渲染子組件，然后渲染父組件。子組件在初始化時，屬性a的值被賦為默認值0，然后父組件進行初始化，將 a=1 傳遞給子組件，子組件接收后將新值覆蓋掉原來的舊值，完成初始化。由于子組件屬性是響應式的，所以從0變化為1后，會更新模板視圖。該過程發(fā)生在組件初始化階段，watch 函數(shù)首次進行綁定，不認為數(shù)據(jù)源發(fā)生了變化，所以不會執(zhí)行回調(diào)。

3 解決方法

Vue 提供了 immediate 屬性，設置該屬性后可以讓 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 } // 添加此行
)

到此這篇關于Vue3子組件watch無法監(jiān)聽父組件傳遞的屬性值的解決方法的文章就介紹到這了,更多相關Vue3 watch無法監(jiān)聽傳遞的屬性值內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

ant?design?vue的form表單取值方法
這篇文章主要介紹了ant?design?vue的form表單取值方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-06-06
vue組件間通信全面講解
這篇文章主要介紹了vue組件間通信全面講解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10
vue中進行微博分享的實例講解
在本篇文章里小編給大家整理的是一篇關于vue中進行微博分享的實例內(nèi)容，有需要的朋友們可以參考下。
2019-10-10
vue中使用$http.post請求傳參的錯誤及解決
這篇文章主要介紹了vue中使用$http.post請求傳參的錯誤及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue路由跳轉(zhuǎn)router-link清除歷史記錄的三種方式(總結(jié))
這篇文章主要介紹了vue路由跳轉(zhuǎn)router-link清除歷史記錄的三種方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
淺談vue的踩坑路
下面小編就為大家?guī)硪黄獪\談vue的踩坑路。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-08-08
Vue中使用echarts實現(xiàn)繪制人體動態(tài)圖
這篇文章主要為大家詳細介紹了Vue中如何使用echarts實現(xiàn)繪制人體動態(tài)圖,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下
2024-03-03
講解vue-router之什么是編程式路由
編程式路由在我們的項目使用過程中最常用的的方法了。這篇文章主要介紹了講解vue-router之什么是編程式路由，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-05-05
Vue3項目中引入html頁面的方法舉例
這篇文章主要給大家介紹了關于Vue3項目中引入html頁面的相關資料,Vue3是一個JavaScript框架,通常我們使用它來構建單頁應用程序(SPA),如果你想在HTML頁面中使用Vue3,可以參考這篇文章,需要的朋友可以參考下
2023-09-09
vue 驗證碼界面實現(xiàn)點擊后標灰并設置div按鈕不可點擊狀態(tài)
今天小編就為大家分享一篇vue 驗證碼界面實現(xiàn)點擊后標灰并設置div按鈕不可點擊狀態(tài)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-10-10