vue3 监听 watch reactive中的属性

Question

问题遇到的现象和发生背景

vue3定义的reactive对象，比如const user = reactive({
firstName: 'zhang',
lastName: '三',
});
为什么里面的属性比如user.firstName,在html模板中正常绑定实现响应式使用，在watch监听中它就不是响应式了，前面必须加()=>才能用，user.firstName到底是不是响应式？

用代码块功能插入代码，请勿粘贴截图

<el-input v-model="user.firstName" />

我的解答思路和尝试过的方法

 watch([user.firstName, user.lastName], (val) => {
            console.log('=========');
  });

这样不会打印执行，改成这样才能打印执行
 watch([()=>user.firstName, ()=>user.lastName], (val) => {
            console.log('=========');
  });

Answer 1

• 看下这篇博客，也许你就懂了，链接：vue3的watch监听方式