50+Vue经典面试题源码级详解（29）

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第6天，点击查看活动详情

前言

小伙伴们好，这是村长《Vue经典面试题源码级详解》系列文章第29题，前面已完成题目合集在此： 历时一个月，2.6W字！50+Vue经典面试题源码级详解，你值得收藏！

学习群

我组织了一个面试学习群，关注村长公众号村长学前端，回复“加群”，大家一起卷~

相关学习资源

本系列有配套视频，思维导图和开源项目，大家学习同时千万不要忘了三连 + 关注 + 分享，有道是喝水不忘挖井人~

• 视频教程：56道经典Vue面试题详解
• 思维导图：Vue面试专题
• 配套代码：vue-interview

29-ref和reactive异同

这是Vue3数据响应式中非常重要的两个概念，自然的，跟我们写代码关系也很大。

--

体验

ref：vuejs.org/api/reactiv…

const count = ref(0)
console.log(count.value) // 0
​
count.value++
console.log(count.value) // 1
复制代码

---

reactive：vuejs.org/api/reactiv…

const obj = reactive({ count: 0 })
obj.count++
复制代码

---

回答思路

1. 两者概念
2. 两者使用场景
3. 两者异同
4. 使用细节
5. 原理阐述

---

回答范例

1. ref接收内部值（inner value）返回响应式Ref对象，reactive返回响应式代理对象
2. 从定义上看ref通常用于处理单值响应式，reactive用于处理对象类型响应式
3. 两者均用于构造响应式数据，但是ref主要解决原始值的响应式问题
4. ref返回的响应式数据在JS中使用需要加上.value才能访问其值，在视图中使用会自动脱ref，不需要.value；ref可以接收对象或数组等非原始值，但内部依然是reactive实现响应式；reactive内部如果接收Ref对象会自动脱ref；使用展开运算符(...)展开reactive返回的响应式对象会使其失去响应性，可以结合toRefs()将值转换为Ref对象之后再展开。
5. reactive内部使用Proxy代理传入对象并拦截该对象各种操作（trap），从而实现响应式。ref内部封装一个RefImpl类，并设置存取器get value/set value，拦截用户对值的访问，从而实现响应式。

---

知其所以然

reactive实现响应式：

github1s.com/vuejs/core/…

ref实现响应式：

github1s.com/vuejs/core/…

写在最后

时间有限，如有错漏，欢迎小伙伴们在评论区补充