情況一：監(jiān)聽 props 中基本數(shù)據(jù)類型

父組件中對傳入數(shù)據(jù)的處理

const handleClick = () => {
  testStr.value += 'P'
}

子組件中監(jiān)聽傳入的數(shù)據(jù)

watch(
  () => props.testStr,
  (newVal, oldVal) => {
    console.log('監(jiān)聽基本類型數(shù)據(jù)testStr')
    console.log('new', newVal)
    console.log('old', oldVal)
  }
)

不能使用

watch(
   props.testStr,
  () => {
    console.log('監(jiān)聽基本類型數(shù)據(jù)testStr')
  }
)

的形式，要使用 getter 函數(shù)返回值的形式才能觸發(fā)監(jiān)聽

情況二：監(jiān)聽 props 中引用數(shù)據(jù)類型且父組件不改變地址指向

父組件中對傳入數(shù)據(jù)的處理

const handleClick = () => {
  let name = 'lx'
  let age = 18
  dataList.value.push({
    name: (name += '~'),
    age: (age += 1)
  })
}

子組件中監(jiān)聽傳入的數(shù)據(jù)

watch(props.dataList, (newVal, oldVal) => {
  console.log('監(jiān)聽引用類型數(shù)據(jù)dataList')
  console.log('new', newVal)
  console.log('old', oldVal)
})

當(dāng)父組件傳入的是引用類型數(shù)據(jù)，且在父組件中沒有改變該數(shù)據(jù)的引用地址時，在子組件中可以直接監(jiān)聽傳入的數(shù)據(jù)

情況三：監(jiān)聽 props 中引用數(shù)據(jù)類型且父組件改變地址指向

父組件中對傳入數(shù)據(jù)的處理

const handleClick = () => {
  let name = 'lx'
  let age = 18
  dataList.value=[
  	{
    	name: (name += '~'),
    	age: (age += 1)
  	}
  ]
}

子組件中監(jiān)聽傳入的數(shù)據(jù)

watch(
  () => props.dataList,
  (newVal, oldVal) => {
    console.log('監(jiān)聽引用類型數(shù)據(jù)dataList')
    console.log('new', newVal)
    console.log('old', oldVal)
  }
)

當(dāng)父組件傳入的是引用類型數(shù)據(jù)，且在父組件中通過賦值的形式，改變引用數(shù)據(jù)的引用地址時，在子組件中要使用 getter 函數(shù)返回值的形式，才能監(jiān)聽傳入的數(shù)據(jù)

總結(jié)

1. watch監(jiān)聽 props 中的基本類型數(shù)據(jù)，需要通過 getter 函數(shù)返回值的形式（()=>props.xxx）才能監(jiān)聽
2. watch監(jiān)聽 props 中的引用類型數(shù)據(jù)，且父組件中沒有改變地址指向時，可以直接監(jiān)聽
3. watch監(jiān)聽 props 中的引用類型數(shù)據(jù)，且父組件中改變了地址指向時，需要通過 getter 函數(shù)返回值的形式（()=>props.xxx）才能監(jiān)聽
4. 開發(fā)情景：要做瀑布流展示

定義變量：const dataList = ref([])

父組件從接口獲取第一頁數(shù)據(jù)，將數(shù)據(jù)存在dataList中：dataList.value = res.data，注意：此時，已經(jīng)改變引用類型數(shù)據(jù) dataList 的地址指向

子組件通過watch監(jiān)聽傳入的 dataList，并且調(diào)用 manageData() 方法處理 props.dataList 的數(shù)據(jù)結(jié)構(gòu)：

watch(
  () => props.dataList,
  () => {
    console.log('監(jiān)聽引用類型數(shù)據(jù)dataList')
    manageData()
    ... // 相應(yīng)邏輯處理
  }
)

注意：此時可以觸發(fā)監(jiān)聽

用戶下拉刷新操作后，繼續(xù)發(fā)送接口，獲取第二頁，第三頁等等后面的數(shù)據(jù)，父組件通過 push 操作，將獲取到的數(shù)據(jù) push 進(jìn) dataList 中：

for(let item of res.data){
	dataList.value.push(item)
}

注意：此時，雖然父組件傳入的 dataList 的值修改了，但是子組件已經(jīng)不能觸發(fā)watch及其處理邏輯了
也就是說，manageData() 方法不能調(diào)用，沒有做到對后續(xù) push 進(jìn)來的數(shù)據(jù)進(jìn)行數(shù)據(jù)結(jié)構(gòu)的修改，導(dǎo)致頁面展示出現(xiàn)問題

解決辦法：

一、使用 computed

const dataListTest = computed(() => {
  manageData()
  return props.dataList
})

二、使用 watchEffect

watchEffect(() => {
  manageData()
})

寫在最后

最后的瀑布流展示中，我是直接修改了 props 中的數(shù)據(jù)，雖然從展示來說沒有發(fā)現(xiàn)什么問題，但是在 Vue 的官網(wǎng)中是這樣說的：

PS：本例子使用語法糖 script setup

到此這篇關(guān)于vue3如何使用watch監(jiān)聽props中數(shù)據(jù)的文章就介紹到這了,更多相關(guān)vue3監(jiān)聽props數(shù)據(jù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論