上市企业网站设计,安徽海川建设公司网站,WordPress需要什么配置,模板搭建网站compute计算属性
Vue3中可以通过 compute进行监听计算属性#xff0c;他返回的是一个ref的对象#xff0c;也就是说 通过compuye这种方式计算属性实际上是进行了ref的操作
import { computed } from vue
const user reactive({firstName: A,lastName: B
})
// 只有getter的…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, // 是否初始化立即执行一次, 默认是falsedeep: 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
}
