Vue3中watch怎么直接监听简单值value变化？要注意哪些坑？

之前有不少刚转Vue3的朋友在评论区或者社群问我,说明明已经用了ref定义了一个简单值比如count，可写watch的时候要么报错，要么没反应，一开始我也踩过类似的小雷，后来翻了官方文档，自己又敲了十几个测试案例，慢慢摸清了直接监听ref简单值的所有门道，今天就把整理好的经验和踩坑记录全分享给大家，看完就能彻底解决这个问题。

直接监听ref简单值value的三种写法

首先大家要明白一点,ref创建的响应式数据，虽然我们在模板里、在setup语法糖的普通函数里直接用变量名就能读取和修改，但它本质上是一个包装对象，这个对象里有个value属性，存的才是我们实际要的简单值——比如字符串、数字、布尔值这些，那如果直接监听变量名，本质是在监听包装对象的引用，引用没变的话（比如只是修改内部的value），watch自然不会触发，得想办法让watch能精准捕捉到value属性的变化，目前常用的有三种写法，我分别给大家举例子，顺便说说它们的适用场景。

第一种写法：直接传递函数返回value

这种是最通用、最稳妥的写法，不管你是用setup选项式API还是