Vue3中单行箭头函数的用法以及注意事项

我们知道在前端中，如果是单行箭头函数，则可以省略大括号（0个参数仍需写参数括号），同时也省略了return关键字。

比如：

错误写法：

const info=ref({
    name:'xhf',
    age:22,
});
const changeAge=()=>{
    info.value.age++;
}
watch(()=>{

    info.value.age
},
    (newValue,oldValue)=>{
    console.log('新年龄：',newValue,'旧年龄',oldValue);
})

这里就无法监视到对象中的age属性，原因是，写掉了return，正确应该是：

const info=ref({
    name:'xhf',
    age:22,
});
const changeAge=()=>{
    info.value.age++;
}
watch(()=>{

    return info.value.age
},
    (newValue,oldValue)=>{
    console.log('新年龄：',newValue,'旧年龄',oldValue);
})

也可以省略的写法：

const info=ref({
    name:'xhf',
    age:22,
});
const changeAge=()=>{
    info.value.age++;
}
watch(()=>info.value.age,
    (newValue,oldValue)=>{
    console.log('新年龄：',newValue,'旧年龄',oldValue);
})

上面两种方法都能顺利监视对象中的age属性