Propiedades calculadas y oyentes de propiedades en Vue3

calcular propiedades calculadas

En Vue3, las propiedades calculadas se pueden monitorear a través de cálculo, que devuelve un objeto de referencia, lo que significa que calcular las propiedades a través de compuye es en realidad una operación de referencia.

import {
    
     computed } from 'vue
const user = reactive({
    
    
	firstName: 'A',
    lastName: 'B'
})
// 只有getter的计算属性
// 监听计算fullName1属性
const fullName1 = computed(() => {
    
    
    console.log('fullName1')
    return user.firstName + '-' + user.lastName
})
// 有getter与setter的计算属性
// 监听计算fullName2属性
const fullName2 = computed({
    
    
    get () {
    
    
    	console.log('fullName2 get')
        return user.firstName + '-' + user.lastName
    },
    set (value: string) {
    
    
        console.log('fullName2 set')
        const names = value.split('-')
        user.firstName = names[0]
        user.lastName = names[1]
     }
})
return {
    
    
    fullName1,
    fullName2,
}

vigilar monitor de propiedad

• Supervise uno o más datos de respuesta especificados. Una vez que los datos cambien, la devolución de llamada de monitoreo se ejecutará automáticamente;
• De forma predeterminada, la devolución de llamada no se ejecuta en la etapa inicial, pero puede configurar lo inmediato para que sea verdadero para especificar que la etapa inicial se ejecute inmediatamente por primera vez;
• Especifique el monitoreo profundo configurando deep as true

import {
    
     watch } from 'vue
const user = reactive({
    
    
	firstName: 'A',
    lastName: 'B'
})
watch(user, () => {
    
    
    fullName3.value = user.firstName + '-' + user.lastName
}, {
    
    
    immediate: true,  // 是否初始化立即执行一次, 默认是false
    deep: true, // 是否是深度监视, 默认是false
})

Entre ellos, el reloj también puede monitorear múltiples datos.

/* 
watch多个数据: 
    使用数组来指定
    如果是ref对象, 直接指定
    如果是reactive对象中的属性,  必须通过函数来指定
*/
// ref 对象
watch([user.firstName, user.lastName, fullName3], (values) => {
    
    
	console.log('监视多个数据', values)
})
// reactive 对象
watch([() => user.firstName, () => user.lastName, fullName3], (values) => {
    
    
	console.log('监视多个数据', values)
})

monitoreo de atributos watchEffect

• No es necesario configurarlo inmediatamente y se ejecutará por primera vez de forma predeterminada, de modo que se puedan recopilar los datos que deben monitorearse;
• En lugar de especificar directamente los datos que se van a monitorear, qué datos de respuesta se utilizan en la función de devolución de llamada para monitorear qué datos de respuesta

import {
    
     watchEffect} from 'vue
const user = reactive({
    
    
	firstName: 'A',
    lastName: 'B'
})
// 监视所有回调中使用的数据
watchEffect(() => {
    
    
    fullName3.value = user.firstName + '-' + user.lastName
}) 
return {
    
    
    user,
    fullName1,
    fullName2,
    fullName3
}