70%的人都答错了的面试题，vue3的ref是如何实现响应式的？

文章预览

前言 最近在我的 vue源码交流群 有位面试官分享了一道他的面试题： vue3的ref是如何实现响应式的？ 下面有不少小伙伴回答的是 Proxy ， 其实这些小伙伴只回答对了一半 。 当ref接收的是一个对象时确实是依靠 Proxy 去实现响应式的。 但是ref还可以接收  string 、 number  或  boolean  这样的原始类型，当是原始类型时，响应式就不是依靠 Proxy 去实现的，而是在 value 属性的 getter 和 setter 方法中去实现的响应式。 本文将通过debug的方式带你搞清楚当ref接收的是对象和原始类型时，分别是如何实现响应式的。注：本文中使用的vue版本为 3.4.19 。 看个demo 还是老套路，我们来搞个demo， index.vue 文件代码如下：    < div >      < p > count的值为：{{ count }} p >      < p > user.count的值为：{{ user.count }} p >      < button  @ click = "count++" > count++ button >      < button   ………………………………