1.前言
vue3新增了ref，reactive两个api用于响应式数据，Ref 系列毫无疑问是使用频率最高的 api 之一,响应式意味着数据变动，页面局部自动更新。数据类型有基本数据类型（string,number,boolean,undfined,null,symbol），引用数据类型（object,array,set,map等）。如何精准检测跟踪js中所有的数据类型变动，并且能够达到vnode的对比后真实dom的渲染？vue中是如何做到的呢？简单实例如下：
import { reactive, ref } from "vue"; import type { Ref } from "vue"; // 定义响应式数据 const count: Ref<number> = ref(0); function countClick() { count.value++; // 更新数据 }
// 定义引用类型数据标注 interface TypeForm { name: string; num: number; list?: Array<[]>; } const formInline: TypeForm = reactive({ name: "", num: 0, }); formInline.name = 'KinHKin' formInline.num = 100 formInline.list = [1,2,3,4]
效果图：
2.比较
先做个ref和reactive的比较
不推荐使用 reactive() 的泛型参数，因为处理了深层次 ref 解包的返回值与泛型参数的类型不同。
ref 被传递给函数或是从一般对象上被解构时，不会丢失响应性：
const obj = { foo: ref(1), bar: ref(2) } // 该函数接收一个 ref // 需要通过 .value 取值 // 但它会保持响应性 callSomeFunction(obj.foo) // 仍然是响应式的 const { foo, bar } = obj
简而言之，ref() 让我们能创造一种对任意值的 “引用”，并能够在不丢失响应性的前提下传递这些引用。这个功能很重要，因为它经常用于将逻辑提取到 组合函数 中。
当 ref 在模板中作为顶层属性被访问时，它们会被自动“解包”，所以不需要使用 .value。下面是之前的计数器例子，用 ref() 代替：
<script setup> import { ref } from 'vue' const count = ref(0) function increment() { count.value++ } </script> <template> <button @click="increment"> {{ count }} <!-- 无需 .value --> </button> </template>
请注意，仅当 ref 是模板渲染上下文的顶层属性时才适用自动“解包”。
3.ref源码解析
对于vue3.2.2x版本的源码位于node_moudles/@vue/reactivity/dist/reactivity.cjs.js文件中
执行顺序是ref ->createRef ->new RefImpl 生成实例对象，提供get，set方法
源码中我们可以看到：入口有两个函数默认深层次响应ref，浅层次使用shallowRef，参数一个false，一个是true。
function ref(value) { return createRef(value, false); } function shallowRef(value) { return createRef(value, true); }
接下来就是走createRef这个方法：
function createRef(rawValue, shallow) { if (isRef(rawValue)) { return rawValue; } return new RefImpl(rawValue, shallow); }
这个createRef方法接受两个参数，一个是传入的基本类型的默认数值，一个是否是深层次响应的boolean值。
function isRef(r) { return !!(r && r.__v_isRef === true); }
如果rawValue本就是ref类型的会立即返回rawValue，否则返回一个RefImpl实例。
RefImpl类：
class RefImpl { constructor(value, __v_isShallow) { this.__v_isShallow = __v_isShallow; this.dep = undefined; this.__v_isRef = true; this._rawValue = __v_isShallow ? value : toRaw(value); this._value = __v_isShallow ? value : toReactive(value); } get value() { trackRefValue(this); return this._value; } set value(newVal) { const useDirectValue = this.__v_isShallow || isShallow(newVal) || isReadonly(newVal); newVal = useDirectValue ? newVal : toRaw(newVal); if (shared.hasChanged(newVal, this._rawValue)) { this._rawValue = newVal; this._value = useDirectValue ? newVal : toReactive(newVal); triggerRefValue(this, newVal); } } }
RefImpl类在构造函数中，__v_isShallow表示是否是浅层次响应的属性， 私有的 _rawValue 变量，存放 ref 的旧值，_value是ref接受的最新的值。公共的只读变量 __v_isRef 是用来标识该对象是一个 ref 响应式对象的标记与在讲述 reactive api 时的 ReactiveFlag 相同。
在const toReactive = (value) => shared.isObject(value) ? reactive(value) : value;这个函数的内部判断是否传入的是一个对象，如果是一个对象就返回reactive返回代理对象，否则直接返回原参数。
当我们通过 ref.value 的形式读取该 ref 的值时，就会触发 value 的 getter 方法，在 getter 中会先通过 trackRefValue 收集该 ref 对象的 value 的依赖，收集完毕后返回该 ref 的值。
function trackRefValue(ref) { if (shouldTrack && activeEffect) { ref = toRaw(ref); { trackEffects(ref.dep || (ref.dep = createDep()), { target: ref, type: "get" /* TrackOpTypes.GET */, key: 'value' }); } } }
当我们对 ref.value 进行修改时，又会触发 value 的 setter 方法，会将新旧 value 进行比较，如果值不同需要更新，则先更新新旧 value，之后通过 triggerRefValue 派发该 ref 对象的 value 属性的更新，让依赖该 ref 的副作用函数执行更新。
function triggerRefValue(ref, newVal) { ref = toRaw(ref); if (ref.dep) { { triggerEffects(ref.dep, { target: ref, type: "set" /* TriggerOpTypes.SET */, key: 'value', newValue: newVal }); } } }
