vue3中计算属性的使用方法:
不同于vue2,computed中有两个方法,一个是读取get,另一个是修改set,如下图所示
const fullName2 = computed({
get(){},
set(){},
})
如果计算属性的函数中如果只传入一个回调函数,表示get,
const fullName = computed(()=> {
return user.firstname + user.lastname
})
对多个数据进行计算数据的绑定
set中传入的参数,指的是get的返回值
const fullName = computed(()=> {
return user.firstname + user.lastname
})
console.log(fullName)
const fullName2 = computed({
get(){
return user.firstname + user.lastname
},
set(val:string){
},
})
watch监视:
此处的val指的就是被监视的user
watch(user,(val)=>{
fullName3.value = firstname + '_' + lastname
},{immediate:true,deep:true})
immediate:true会马上执行
deep:true对对象有个深度监视
watch(user,({firstname,lastname})=>{
fullName3.value = firstname + '_' + lastname
},{immediate:true,deep:true})
监视多个数据:
写成数组的形式:
watch([user,fullName3],()=>{
console.log('====')
})
对于响应式数据和非响应式数据监视的写法:
const user = reactive({
// 姓氏
firstname:'东方',
// 名字
lastname:'不败'
})
const fullName3 = ref()
这样写是不会起作用的
watch([user.firstname,user.lastname],()=>{
console.log('====')
})
正确写法:
watch([()=>user.firstname,()=>user.lastname],()=>{
console.log('====')
})
watchEffect监视:
这种监视是不需要配置immediate,默认执行一次
watchEffect(()=>{
fullName3.value = user.firstname + '_' + user.lastname
})