Propriétés calculées et écouteurs de propriétés dans Vue3

calculer les propriétés calculées

Dans Vue3, vous pouvez écouter les propriétés calculées via Compute, qui renvoie un objet ref, ce qui signifie que le calcul des propriétés via Compuye est en fait une opération de référence.

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,
}

regarder le moniteur de propriété

• Surveillez la ou les données réactives spécifiées, une fois les données modifiées, le rappel de surveillance sera exécuté automatiquement ;
• Par défaut, le rappel n'est pas exécuté à l'étape initiale, mais vous pouvez configurer immédiat sur true pour spécifier que l'étape initiale est exécutée immédiatement pour la première fois ;
• Spécifiez une surveillance approfondie en configurant Deep sur 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
})

Parmi eux, la montre peut également surveiller plusieurs données

/* 
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)
})

Surveillance des attributs watchEffect

• Il n'est pas nécessaire de configurer immédiatement, et il sera exécuté pour la première fois par défaut, afin que les données à surveiller puissent être collectées ;
• Au lieu de spécifier directement les données à surveiller, quelles données réactives sont utilisées dans la fonction de rappel pour surveiller quelles données réactives

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