計算されたプロパティを計算する
Vue3 では、compute を通じて計算されたプロパティをリッスンできます。これは ref オブジェクトを返します。つまり、compuye によるプロパティの計算は実際には ref 操作です。
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,
}
監視プロパティモニター
- 指定された 1 つ以上の応答データを監視します。データが変更されると、監視コールバックが自動的に実行されます。
- デフォルトでは、コールバックは初期ステージでは実行されませんが、immediate を true に構成して、初期ステージが初めてすぐに実行されるように指定できます。
- deep を 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
})
その中で、時計は複数のデータを監視することもできます
/*
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)
})
watchEffect 属性の監視
- 即時を構成する必要はなく、デフォルトで初回実行されるため、監視する必要のあるデータが収集されます。
- 監視するデータを直接指定するのではなく、コールバック関数でどの応答データを使用してどの応答データを監視するか
import {
watchEffect} from 'vue
const user = reactive({
firstName: 'A',
lastName: 'B'
})
// 监视所有回调中使用的数据
watchEffect(() => {
fullName3.value = user.firstName + '-' + user.lastName
})
return {
user,
fullName1,
fullName2,
fullName3
}