浅析Vue3中的计算属性和属性监听
作者：Python User
这篇文章主要为大家详细介绍了Vue3中的计算属性和属性监听的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
compute计算属性
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,
}watch 属性监听
监视指定的一个或多个响应式数据, 一旦数据变化, 就自动执行监视回调;
默认初始时不执行回调, 但可以通过配置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 也可以监听多个数据
/*
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 属性监听
不需要配置immediate，默认初始时就会执行第一次, 从而可以收集需要监视的数据；
不用直接指定要监视的数据, 回调函数中使用的哪些响应式数据就监视哪些响应式数据
import { watchEffect} from 'vue
const user = reactive({
firstName: 'A',
lastName: 'B'
})
// 监视所有回调中使用的数据
watchEffect(() => {
fullName3.value = user.firstName + '-' + user.lastName
})
return {
user,
fullName1,
fullName2,
fullName3
}到此这篇关于浅析Vue3中的计算属性和属性监听的文章就介绍到这了,更多相关Vue3属性内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！