Escenario 1: monitorear tipos de datos básicos en accesorios
Procesamiento de datos entrantes en el componente principal
const handleClick = () => {
testStr.value += 'P'
}
Escuche los datos entrantes en componentes secundarios
watch(
() => props.testStr,
(newVal, oldVal) => {
console.log('监听基本类型数据testStr')
console.log('new', newVal)
console.log('old', oldVal)
}
)
Fuera de servicio
watch(
props.testStr,
() => {
console.log('监听基本类型数据testStr')
}
)
En forma del valor de retorno de la función getter, se puede activar la supervisión.
Caso 2: Supervise el tipo de datos de referencia en accesorios y el componente principal no cambia la dirección que apunta
Procesamiento de datos entrantes en el componente principal
const handleClick = () => {
let name = 'lx'
let age = 18
dataList.value.push({
name: (name += '~'),
age: (age += 1)
})
}
Escuche los datos entrantes en componentes secundarios
watch(props.dataList, (newVal, oldVal) => {
console.log('监听引用类型数据dataList')
console.log('new', newVal)
console.log('old', oldVal)
})
Cuando el componente principal pasa datos de tipo de referencia y la dirección de referencia de los datos no se cambia en el componente principal, el componente secundario puede monitorear directamente los datos entrantes.
Escenario 3: monitorear el tipo de datos de referencia en accesorios y el componente principal cambia la dirección para apuntar
Procesamiento de datos entrantes en el componente principal
const handleClick = () => {
let name = 'lx'
let age = 18
dataList.value=[
{
name: (name += '~'),
age: (age += 1)
}
]
}
Escuche los datos entrantes en componentes secundarios
watch(
() => props.dataList,
(newVal, oldVal) => {
console.log('监听引用类型数据dataList')
console.log('new', newVal)
console.log('old', oldVal)
}
)
Cuando el componente principal pasa datos de tipo de referencia y la dirección de referencia de los datos de referencia se cambia en forma de asignación en el componente principal, el valor de retorno de la función getter debe usarse en el componente secundario para monitorear los datos entrantes.
Resumir
1. watch监听 props 中的基本类型数据，需要通过 getter 函数返回值的形式（()=>props.xxx）才能监听
2. watch监听 props 中的引用类型数据，且父组件中没有改变地址指向时，可以直接监听
3. watch监听 props 中的引用类型数据，且父组件中改变了地址指向时，需要通过 getter 函数返回值的形式（()=>props.xxx）才能监听
4. 开发情景：做瀑布流展示
Definir variables:const dataList = ref([])
El componente principal obtiene la primera página de datos de la interfaz y almacena los datos en dataList: dataList.value = res.data, Nota: En este momento, la dirección de los datos de tipo de referencia dataList ha sido cambiada.
El subcomponente monitorea la lista de datos entrante a través de vigilancia y llama al método ManageData () para procesar la estructura de datos de props.dataList:
watch(
() => props.dataList,
() => {
console.log('监听引用类型数据dataList')
manageData()
... // 相应逻辑处理
}
)
Nota: El monitoreo se puede activar en este momento
Después de que el usuario baja para actualizar, continúe enviando la interfaz para obtener los datos en la segunda página, tercera página, etc., y el componente principal inserta los datos obtenidos en la lista de datos mediante la operación de inserción:
for(let item of res.data){
dataList.value.push(item)
}
Nota: En este momento, aunque el valor de la lista de datos pasada por el componente principal se ha modificado, el componente secundario ya no puede activar la vigilancia y su lógica de procesamiento. En otras palabras, no se puede llamar al método ManageData ()
y Los datos que se introducen posteriormente no se procesan. Las modificaciones en la estructura de datos causaron problemas con la visualización de la página.
Solución:
1. Utilice calculado
const dataListTest = computed(() => {
manageData()
return props.dataList
})
2. Utilice efecto reloj
watchEffect(() => {
manageData()
})
escribe al final
En la visualización final del flujo de la cascada, modifiqué directamente los datos en los accesorios. Aunque no se encontraron problemas en la visualización, el sitio web oficial de Vue decía esto:
PD: este ejemplo utiliza la configuración del script de azúcar de sintaxis