Scenario 1: Monitor basic data types in props
Processing of incoming data in parent component
const handleClick = () => {
testStr.value += 'P'
}
Listen for incoming data in child components
watch(
() => props.testStr,
(newVal, oldVal) => {
console.log('监听基本类型数据testStr')
console.log('new', newVal)
console.log('old', oldVal)
}
)
Out of service
watch(
props.testStr,
() => {
console.log('监听基本类型数据testStr')
}
)
In the form of the return value of the getter function, the monitoring can be triggered.
Case 2: Monitor the reference data type in props and the parent component does not change the address pointing
Processing of incoming data in parent component
const handleClick = () => {
let name = 'lx'
let age = 18
dataList.value.push({
name: (name += '~'),
age: (age += 1)
})
}
Listen for incoming data in child components
watch(props.dataList, (newVal, oldVal) => {
console.log('监听引用类型数据dataList')
console.log('new', newVal)
console.log('old', oldVal)
})
When the parent component passes in reference type data and the reference address of the data is not changed in the parent component, the child component can directly monitor the incoming data.
Scenario 3: Monitor the reference data type in props and the parent component changes the address to point to
Processing of incoming data in parent component
const handleClick = () => {
let name = 'lx'
let age = 18
dataList.value=[
{
name: (name += '~'),
age: (age += 1)
}
]
}
Listen for incoming data in child components
watch(
() => props.dataList,
(newVal, oldVal) => {
console.log('监听引用类型数据dataList')
console.log('new', newVal)
console.log('old', oldVal)
}
)
When the parent component passes in reference type data, and the reference address of the reference data is changed in the form of assignment in the parent component, the return value of the getter function must be used in the child component to monitor the incoming data.
Summarize
1. watch监听 props 中的基本类型数据，需要通过 getter 函数返回值的形式（()=>props.xxx）才能监听
2. watch监听 props 中的引用类型数据，且父组件中没有改变地址指向时，可以直接监听
3. watch监听 props 中的引用类型数据，且父组件中改变了地址指向时，需要通过 getter 函数返回值的形式（()=>props.xxx）才能监听
4. 开发情景：做瀑布流展示
Define variables:const dataList = ref([])
The parent component obtains the first page of data from the interface and stores the data in dataList: Note dataList.value = res.data: At this time, the address of the reference type data dataList has been changed.
The subcomponent monitors the incoming dataList through watch, and calls the manageData() method to process the data structure of props.dataList:
watch(
() => props.dataList,
() => {
console.log('监听引用类型数据dataList')
manageData()
... // 相应逻辑处理
}
)
Note: Monitoring can be triggered at this time
After the user pulls down to refresh, continue to send the interface to obtain the data on the second page, the third page, etc., and the parent component pushes the obtained data into the dataList through the push operation:
for(let item of res.data){
dataList.value.push(item)
}
Note: At this time, although the value of the dataList passed in by the parent component has been modified, the child component can no longer trigger the watch and its processing logic. In other words, the
manageData() method cannot be called, and the subsequent push incoming data has not been processed. Modifications to the data structure caused problems with page display
Solution:
1. Use computed
const dataListTest = computed(() => {
manageData()
return props.dataList
})
2. Use watchEffect
watchEffect(() => {
manageData()
})
write at the end
In the final waterfall flow display, I directly modified the data in props. Although no problems were found in the display, the official website of Vue said this:
PS: This example uses syntax sugar script setup